0

デフォルトで非表示になっている 2 つの 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;
    }

ジャバスクリプト

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

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

ここで動作するデモを見ることができます...

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

私は助けを求めて周りを見回しましたが、すべての解決策は、1 つの div が常に表示されているタブに関するものです。これは私が求めているものではありません。そのリンクがクリックされた場合にのみ、div が表示されます。

確認のために、「メニュー」divがすでに開いていて、ユーザーが「検索」をクリックすると、「メニュー」divが非表示になり、「検索」が表示されます。2 つの 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 に答える