Question

我有两个用toggleClass打开的div，如下所示：

<!-- 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，如果打开＆amp;反之亦然。

有什么想法吗？

jsfiddle here...

Answer 1

您当前的代码会从切换中删除show标记，但它实际上不会隐藏内容区域。您可以添加slideUp（）来执行此操作：

$(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/

jQuery toggleclass 2 divs - 打开一个＆amp;关闭另一个

1 个答案: