Question

我有一个汉堡按钮“ .btn”-单击时，它将显示一个包含三个菜单项的下拉菜单。显示“ .menu”：无；显示“ .show”：块

<script type="text/javascript">
        $(".btn").on("click",function(){
          $('.menu').toggleClass("show");
        });
</script>

我想让该类在单击任何菜单项时从“显示”切换回“菜单”，因为它们是页面下部的锚点链接。我尝试过向每个菜单项添加一个类并实现相反的逻辑：

$(".menuLink").on("click",function(){
              $('.show').toggleClass("menu");
            });

^遗憾的是，这行不通，并且以无样式的方式显示覆盖菜单栏的所有链接（蓝色链接）。

HTML

            <div class="menu">
                <a href="#product">THE PRODUCT</a>
                <a href="#story">THE STORY</a>
                <a href="contact.html">CONTACT</a>
            </div>

CSS

.menu {
    position: absolute;
    width: 100%;
    display: none;
    top: 60px;
    left: 0;
    right: 0;
    max-height: 0px;
}

.menu a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    text-decoration: none;
    color: #ddc170;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 15pt;
}

.show {
    display: block;
    max-height: 500px;
    background: rgba(30, 30, 30, 0.9);
}

任何帮助都会很棒。谢谢。

Answer 1

您可以使用jQuery .text()方法根据菜单链接的当前文本来设置菜单链接的文本。

.menu {
    position: absolute;
    width: 100%;
    display: none;
    top: 60px;
    left: 0;
    right: 0;
    max-height: 0px;
}

.menu a {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    text-decoration: none;
    color: #ddc170;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 15pt;
}

.show {
    display: block;
    max-height: 500px;
    background: rgba(30, 30, 30, 0.9);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menuLink">Show</a>
<div class="menu">
     <a href="#product">THE PRODUCT</a>
     <a href="#story">THE STORY</a>
     <a href="contact.html">CONTACT</a>
</div>
<script>
$(".menuLink").on("click",function(){
    $(".menu").toggleClass("show");
    $(this).text()=="Show"?$(this).text("Hide"):$(this).text("Show");
});
</script>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
      $(document).ready(function(){
      $("#show").click(function(){
        $(".menu").toggle();
      });

     });
 </script>
</head>
<body>
  <div class="menu">
            <a href="#product">THE PRODUCT</a>
            <a href="#story">THE STORY</a>
            <a href="contact.html">CONTACT</a>
        </div>
   <button id="show">show</button>
</body>

在按钮的位置，您可以使用简单的切换图标

单击菜单链接时切换类

2 个答案: