html - 通过使用 javascript 在类中添加一个词来单击按钮时为菜单添加/删除 [toggle]

Question

当我点击这个按钮时

<div id="header-nav-container">
            <div id="explore" class="btn btn-clear header-nav">
                <a title="Explore">Explore </a>
            </div>

我想打开这个菜单，然后像切换一样点击关闭

 <div id="header-menus">
 <div id="explore-menu" class="header-menu open"> 

Answer 1

您可以使用 jQuery toggleClass() 或 slideToggle() 来实现。

HTML:

<a href="#" class="toggle">Explore</a>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non odio sit amet tortor lacinia eleifend. Nulla vel felis felis, tempor varius turpis. Curabitur fermentum pulvinar convallis. Donec posuere cursus lectus sit amet bibendum. Nunc ut arcu dolor, lacinia interdum ante. Vestibulum ut neque augue, sit amet vulputate neque. Proin auctor, neque at volutpat accumsan, orci elit iaculis velit, eu dictum ipsum nibh quis lacus.</p>
</div>
<hr>
<a href="#" class="toggle-2">Explore 2</a>
<div class="content-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non odio sit amet tortor lacinia eleifend. Nulla vel felis felis, tempor varius turpis. Curabitur fermentum pulvinar convallis. Donec posuere cursus lectus sit amet bibendum. Nunc ut arcu dolor, lacinia interdum ante. Vestibulum ut neque augue, sit amet vulputate neque. Proin auctor, neque at volutpat accumsan, orci elit iaculis velit, eu dictum ipsum nibh quis lacus.</p>
</div>

CSS:

div {
    display:none;
}
div.open {
    display:block;
}

jQuery:

jQuery(document).ready(function() {
    jQuery(".toggle").click(function(event) {
        event.preventDefault();
        jQuery(".content").slideToggle("slow");
    }); 
    jQuery(".toggle-2").click(function(event) {
        event.preventDefault();
       jQuery(".content-2").toggleClass("open");
    }); 
});

以及实例:http://jsfiddle.net/lddz/p4sh8v1u/