Question

我将从我的JSFiddle示例开始：

基本上我试图获得与this post（JSFiddle here）所示相同的效果，但是我在实现它时遇到了一些麻烦 - 因为我想检查多个div的切换状态而不是简单地在两个div之间切换。我尝试过使用以下内容：

$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
    $(".createmenu").toggle("fast");
    $(".searchmenu").toggle("fast");     
} else {
    $(".createmenu").toggle("fast");
});

（因此，如果搜索菜单已打开，请关闭它并打开创建菜单，但如果它未打开，只需打开创建菜单。）

如果我在css中使用:visible而不是display：none，我不确定$("div").hide()函数是否适用？

对此的任何帮助都将受到广泛赞赏 - 甚至建议使用其他合适的方法，例如可能的jquery手风琴等？

非常感谢

Answer 1

请试试这个：

<强> HTML：

<div class="actionsmenu" id="actionsmenu">
    <div id="navmenu">
        <ul id="navmenu">
            <li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
            <li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
            <li><a href='#' class="tog" data-id="settingsmenu"  id='showsettings'>Settings</a></li>
            <li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
        <ul>
    </div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">

<强> JS：

$(document).ready(function () {    
    $(".menu").hide();

    $(".tog").click(function () {    
        $(".menu").hide();
        $("." + $(this).data('id')).toggle("fast");
    });
});

<强> FIDDLE：

http://jsfiddle.net/CR5FB/14/

修改

如果要将它们分配给同一事件，则必须为链接和div使用一些公共类。

我可以找到更好的解决方案：http://jsfiddle.net/CR5FB/19/

Answer 2

这是一个JS小提琴：http://jsfiddle.net/7nGYE/

您需要做的是使用CSS类跟踪活动菜单，因此当单击另一个菜单时，您切换活动菜单，将其删除为活动菜单，然后将新菜单设置为活动div。

特别是，在任何菜单项上单击：

$('ul#navmenu a').click(function() {
    $('div.active').removeClass('active').toggle('fast');
});

隐藏活动菜单。然后，在特定菜单项上单击：

$("#showcreate").click(function () {
    $(".createmenu").toggle("fast").addClass('active');
});

添加'有效'CSS类以跟踪它。

在显示另一个时隐藏div - jQuery切换

2 个答案: