0

我有两个默认隐藏的 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 不应该同时显示！

提前致谢

4

3 回答 3

6

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

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

小提琴

于 2013-06-08T15:24:59.527 回答
1

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

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

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

});

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

于 2013-06-08T15:15:33.790 回答
0 
<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');

});
于 2013-10-02T13:30:47.897 回答