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

我将从我的JSFIDLE示例开始：

基本上，我试图获得与（）所示相同的效果，但是在实现它时遇到了一些困难——因为我想检查多个div的切换状态，而不是简单地在两个div之间切换。我已尝试使用以下方法：

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

（因此，如果搜索菜单已打开，请将其关闭并打开“创建”菜单，如果未打开，请打开“创建”菜单）

如果我在css中使用了

$（“div”）.hide（）

而不是display:none，我不确定

：visible

函数是否适用

我们将非常感谢您在这方面提供的任何帮助，甚至是对另一种合适方法的建议，如jquery accordion等

非常感谢

请试试这个：

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">

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

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

小提琴：

<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">

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

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

编辑：

<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">

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

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

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

你可以为我找到更好的解决方案：

这是一把JS小提琴：

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

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

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

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

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

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

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

---

添加“活动”CSS类以跟踪它。

CSS解决方案不错，但请改进您的脚本：有许多类似的函数可以执行相同的操作。我的CSS中有一个类，代码如下：`#navmenu li.active{background:#000000；}`是否可以激活此代码，以便在单击列表项时，css将使用

addClass（）

来“显示”（即当子视窗可见时）？再次感谢梅尔瓦斯！还尝试了

$（“+$（this）.data（'id'））.toggle（“fast”）.addClass（'active'）：）