jQuery的toggleclass 2周的div - 打開一個與關閉其他

Question

我有2個div的，我有toggleClass打開後，如下：

<!-- links to open div's --> 
<div class="sort-filter"> 
    <div class="sort"> 
    <a href="#" class="sort"><em class="fa fa-sort"></em> SORT</a> 
    </div> 
    <div class="filter"> 
    <a href="#" class="filter"><em class="fa fa-filter"></em> FILTER</a> 
    </div> 
</div> 

<!-- divs to toggle open/close --> 
<div class="search-options clearfix" style="display: none;"> 
    content options here 
</div> 
<div class="search-filters clearfix" style="display: none;"> 
    content filters here 
</div> 

我用下面的jQuery來切換div的：

<script type="text/javascript"> 
$(function ($) { 
    var search_options = $('.search-options'); 
    $('a.sort').click(function() { 
     $(this).toggleClass('show'); 
     search_options.slideToggle(400); 
     if (!$(this).hasClass('show')) { 
      $('a.filter').removeClass('show'); // hide the other one 
     } 
     return false; 
    }); 
    var search_filters = $('.search-filters'); 
    $('a.filter').click(function() { 
     $(this).toggleClass('show'); 
     search_filters.slideToggle(400); 
     if (!$(this).hasClass('show')) { 
      $('a.sort').removeClass('show'); // hide the other one 
     } 
     return false; 
    }); 
}); 
</script> 

但我的邏輯被搞砸了。

我想要一個鏈接關閉其他div如果打開&反之亦然。

任何想法的？

jsfiddle here...

Answer 1

您當前的代碼將刪除切換顯示標誌，但實際上隱藏內容區域它不會做任何事情。您可以添加效果基本show（）來做到這一點：

$(function ($) { 
    var search_options = $('.search-options'); 
    $('a.sort').click(function() { 
     $(this).toggleClass('show'); 
     search_options.slideToggle(400); 
     if ($(this).hasClass('show')) { 
      $('a.filter').removeClass('show'); // mark the other as hidden 
      search_filters.slideUp(400); // hide the other one 
     } 
     return false; 
    }); 
    var search_filters = $('.search-filters'); 
    $('a.filter').click(function() { 
     $(this).toggleClass('show'); 
     search_filters.slideToggle(400); 
     if ($(this).hasClass('show')) { 
      $('a.sort').removeClass('show'); // mark the other as hidden 
      search_options.slideUp(400); // hide the other one 
     } 
     return false; 
    }); 
}); 

這裏有一個小提琴：http://jsfiddle.net/yj9f5qh8/