首次访问后隐藏 div

Question

我有一个按钮 (B) 在单击时显示菜单 (C)，而弹出窗口 (A) 在单击时也显示相同的菜单 (C)。
我需要在这里做 4 件事。

1) 单击 B 时，会出现 C。
2) 点击A，出现C。
3）点击B时，A变为隐藏
4) A 在第一次访问后被隐藏。 （如欢迎信息）

但是，如果我在第一次访问时添加脚本似乎不起作用（我在这里使用 localStorage）。谁能知道哪里出错了？ 另外，我是 javascript 新手，所以我只是在网上寻找代码并添加它们以查看它们是否有效。我不确定是否有任何方法可以使代码变得更好？（现在它们都被分开了。）谢谢。

这是我的代码

<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>

这是我的脚本

          <!--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

试试这个：您可以为 A 和 B 设置一个单击处理程序，在单击后隐藏 A 并显示 C。

$(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>