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.

＆＃13;

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

＆＃13;

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

＆＃13;

首次访问后隐藏div

1 个答案: