Hide ein div nach dem ersten Mal

Question

Ich habe eine Schaltfläche (B) zeigt ein Menü (C) beim Klicken und ein Popup (A) zeigt auch das gleiche Menü (C) beim Klicken.
Es gibt 4 Dinge, die ich hier tun muss.

1) Wenn Sie auf B klicken, erscheint C.
2) Wenn Sie auf A klicken, erscheint C.
3) Wenn Sie auf B klicken, wird A ausgeblendet
4) A wird nach dem ersten Besuch ausgeblendet. (wie eine Willkommensnachricht)
Allerdings scheint es nicht zu funktionieren, wenn ich das Skript zum ersten Mal besuchen (ich verwende localStorage hier). Könnte jemand wissen, wo schief gelaufen ist? Auch ich bin neu in Javascript, so bin ich nur auf der Suche nach Codes online und Hinzufügen von ihnen, um zu sehen, ob sie funktionieren. Ich bin nicht sicher, ob es irgendeinen Weg gibt, die Codes besser zu machen (jetzt sind sie alle getrennt.) Danke.

Hier ist mein Code

<div class="user-menu-group"> 
    <a href="javascript:void()" onclick="hide('1sttime')" class="open-user-menu">B 
     <div class="notification" id="1sttime"> 
     <p>A</p> 
     </div> 
    </a> 
    <div class="user-menu-bs">C</div> 
</div> 

hier mein Skript ist

  <!--first time message--> 
      <script> 
      $(document).ready(function() { 
       if (localStorage.getItem('wasVisited') !== undefined) { 
        $("#1sttime").hide(); 
       } else { 
        localStorage.setItem('wasVisited', 1); 
        $("#1sttime").delay(5000).fadeOut(500); 
       } 
      }); 
      </script> 

      <!--hide A after clicking B--> 
      <script> 
      function show(target) { 
       document.getElementById(target).style.display = 'block'; 
      } 

      function hide(target) { 
       document.getElementById(target).style.display = 'none'; 
      } 
      </script> 

      <!--hide A after clicking it--> 
      <script> 
      (function() { 
       var elements = document.getElementsByClassName('notification'); 
       for (var i = 0; i < elements.length; i++) { 
        elements[i].addEventListener('click', function() { 
         this.style.display = 'none'; 
        }); 
       } 
      })(); 
      </script> 

Answer 1

Try this: Sie können für A und B einen einzigen Klick-Handler haben, verstecken A und Show C nach Klick.

$(function(){ 
 
    $('.open-user-menu, .notification').click(function(){ 
 
    $('.notification').hide(); 
 
    $('.user-menu-bs').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="user-menu-group"> 
 
    <a href="javascript:void()" onclick="hide('1sttime')" class="open-user-menu">B 
 
     <div class="notification" id="1sttime"> 
 
     <p>A</p> 
 
     </div> 
 
    </a> 
 
    <div class="user-menu-bs" style="display:none">C</div> 
 
</div>