如果用jQuery打开,显示div并隐藏现有的div？

Question

我有两个默认隐藏的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应该永远不会同时出现!

提前致谢

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

JS

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

小提琴