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

Question

我将以我的JSFiddle示例开始：

http://jsfiddle.net/CR5FB/5/

基本上我正在尝试获得与this post（JSFiddle here）相同的效果，然而我在实现它时遇到了一些问题-因为我想检查多个div的切换状态而不仅仅是在两个div之间切换。我已经尝试使用以下方法：

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

如果搜索菜单已经打开，请关闭它并打开创建菜单；如果搜索菜单没有打开，请直接打开创建菜单。

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

非常感谢任何帮助，甚至包括建议其他合适的方法，如可能的jQuery手风琴等。

谢谢。

- MWoot

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/

- melvas

---

我在我的CSS中有一个类，其中包含以下代码：#navmenu li.active { background: #000000; } 是否可能激活此代码，以便单击列表项时，使用addClass()显示CSS（即当子div可见时）？再次感谢melvas！ - MWoot

也尝试在if语句中使用$("." + $(this).data('id')).toggle("fast").addClass('active'); :) - MWoot

Answer 2

这是一个JS fiddle: 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');
});

添加“active”CSS类以跟踪它。

- Philip Chen

---

CSS的解决方案还不错，但请改进您的脚本：有太多类似的函数执行相同的操作。 - melvas