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

FIDDLE

Answer 2

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

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

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

});

和您的菜单处理程序执行相同操作，仅检查搜索框可见性。

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

});

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

3 个答案: