如果使用 jQuery 打开，显示 div 并隐藏现有的 div？答案

【问题标题】：show div and hide existing div if open with jQuery?如果使用 jQuery 打开，显示 div 并隐藏现有的 div？
【发布时间】：2013-10-02 21:30:47
【问题描述】：

我有两个默认隐藏的 div。然后用户在点击时显示 div。如果一个 div 已经打开，并且用户单击以显示另一个 div，我希望当前 div 隐藏，并显示新 div。

我当前的代码是这个..

HTML

<div class="menu">MENU</div>
<div class="search">SEARCH</div>

<div class="menu-box">MENU BOX</div>
<div class="search-box">SEARCH BOX</div>

CSS

 .menu, .search {
      display:inline-block;
      cursor:pointer;
    }

    .menu, .search, .menu-box, .search-box  {
      padding:20px;
      background-color: #ccc;
      margin-right:10px;  
    }

    .menu-box, .search-box {
      width:20%;
      display:none;
    }

    .menu-box {
      background-color:red;
    }

    .search-box {
      background-color:green;
    }

JAVASCRIPT

$('.menu').click(function(){
    $('.menu-box').slideToggle();
});

$('.search').click(function(){
    $('.search-box').slideToggle();
});

你可以在这里看到一个工作演示......

http://codepen.io/seraphzz/pen/zbHDk

我环顾四周寻求帮助，但找到的所有解决方案都是针对选项卡的，其中一个 div 始终显示。这不是我所追求的。仅当单击该链接时才应显示 div。

所以要确认，如果“菜单”div 已经打开，并且用户点击“搜索”，我希望隐藏“菜单”div 并显示“搜索”。两个 div 不应该同时显示！

提前致谢

【问题讨论】：

标签： jquery slidetoggle

【解决方案1】：

使用同一个类会更容易吗？

<div class="btn">MENU</div>
<div class="btn">SEARCH</div>


<div class="slide menu-box">MENU BOX</div>
<div class="slide search-box">SEARCH BOX</div>

$('.btn').on('click', function(){
    $('.slide').slideUp().eq($(this).index()).stop().slideToggle();
});

FIDDLE

【讨论】：

这是一个很好的解决方案。您可以编辑此代码，以便在新的 div 打开之前关闭打开的 div 吗？就像我在这里所做的那样.. codepen.io/seraphzz/pen/Ldsav
@Adam - 当然，类似FIDDLE
如果@adeneo 回答了，那无疑是最好的解决方案... :)
@writeToBhuwan - 谢谢，你说得很好。虽然并非总是如此，但仍然很好！

【解决方案2】：

将您的搜索点击处理程序更改为：

$('.search').click(function(){
    $('.search-box').slideToggle();

    if($(".menu-box").is(":visible")) {
        $(this).slideToggle();
    }

});

和你的菜单处理程序做同样的事情，只检查搜索框的可见性。

【讨论】：

$(this).slideToggle();代替 $('.menu-box').slideToggle(); ?只是说..
@writeToBhuwan 是的，可能更好的做法是使用 $(this) :)
谢谢，我以此为起点，然后对其进行了调整，使过渡更加优雅（打开的 div 在下一个打开之前向上滑动）。这是一个代码笔...codepen.io/seraphzz/pen/Ldsav - 有没有更简洁的方法来写这个？
@Adam 如果您想要更简洁的版本，我实际上会推荐下面 adeneo 的答案。
感谢这个解决方案，但我选择了 adeneo，因为他使用的代码更少。

【解决方案3】：

<h3><a href="#1" class="toggler">Title of Section 1</a></h3>
<div id="1" class="element">Content goes here for the above h tag</div>

<h3><a href="#2" class="toggler">Title of Section 2</a></h3>
<div id="2" class="element">Content goes here for the above h tag</div>


$(".toggler").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');

    $(".element").hide();
    $(id).show('slow');

});

【讨论】：