如果使用jQuery打开，是否显示div并隐藏现有div？

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

我现在的代码是

HTML

JAVASCRIPT

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

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

因此，为了确认，如果“菜单”div已经打开，并且用户单击“搜索”，我希望“菜单”div隐藏，“搜索”显示。两个div不应该同时出现

---

提前感谢

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

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

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

});

---

您的菜单处理程序也要这样做，只需检查搜索框的可见性。

使用相同的类会使这更容易吗

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

---

$this.slideToggle；代替$'.menu box'.slideToggle？只是说..@writeToBhuwan是的，使用$this可能是更好的练习：谢谢，我把它作为一个起点，然后调整它，使转换更加优雅，在下一个打开之前打开div幻灯片。这是一个密码笔…-有没有更干净的方法来写这篇文章？@Adam如果你想要更干净的版本，我会推荐下面adeneo的答案。谢谢你的解决方案，但我选择了adeneo，因为他使用的代码更少。这是一个很好的解决方案。您可以编辑此代码，使打开的div在新div打开之前关闭吗？就像我在这里做的一样@亚当-当然，如果由@adeneo回答，这无疑是最好的解决方案…：@写信给布万-谢谢，你这么说真是太好了。虽然不总是这样，但仍然很好！

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

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

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

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

});

<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();
});

<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');

});