javascript - 单击菜单链接时切换类

Question

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

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

我希望类在单击任何菜单项时从“显示”切换回“菜单”- 假设它们是指向页面下部的 anchor 链接。我尝试向每个菜单项添加一个类并实现反向逻辑:

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