通过使用javascript向类添加一个单词，单击按钮时为菜单添加/删除[切换]答案

【问题标题】：add/remove [toggle] for menu when click on button by add one word to class using javascript通过使用javascript向类添加一个单词，单击按钮时为菜单添加/删除[切换]
【发布时间】：2015-10-14 15:02:16
【问题描述】：

当我点击这个按钮时

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

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

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

【问题讨论】：

请解释更多或发布您的 jquery 或 jsfiddle
当 class="header-menu" 菜单关闭，但是当写 class="header-menu open" 菜单打开>>>>我想知道可以做到这一点的java脚本代码>> >>>>>>>>>>>>>>
点击这个按钮
探索
菜单在添加 open 时按类打开和关闭（切换）你能理解我吗？就像在课堂上添加分开（一个词）

标签： html css class menu toggle

【解决方案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/

【讨论】：

2 个按钮没有 ...在同一个 e 按钮上，像这样 instructables.com 在这个网站上输入并点击探索按钮将在我的下方..我想要这个
@eng.heba，小提琴中的第一个例子就是这样做的。 jsfiddle.net/lddz/w0039o10

【解决方案2】：

试试这个：

<a title="Explore" onclick="toggleOpen();">Explore </a>

function toggleOpen(){
    if (document.getElementById("explore-menu").className == "header-menu") {
        document.getElementById("explore-menu").className = "header-menu open";
    }
    else {
        document.getElementById("explore-menu").className = "header-menu";
    }
}

【讨论】：

【解决方案3】：

试试这个。

$('#explore').on({
    click: function (event) {
        event.preventDefault();
        $('body').find('#explore-menu').toggleClass('open');
    }

}, '#header-nav-container');

【讨论】：