javascript - 显示另一个时隐藏 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");
});

(因此，如果搜索菜单已打开，请将其关闭并打开创建菜单，但如果未打开，则只需打开创建菜单)。

如果我在 $("div").hide() 而不是 display:none CSS？

在此方面的任何帮助将不胜感激 - 甚至是对其他合适方法的建议，例如可能的 jquery Accordion 等？

非常感谢

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/