複数のdivを使用したJavascript SlideUp

Question

今のところ、アクティブなフィルタは1つのみです。他のフィルタをクリックしようとすると、最初のフィルタがキャンセルされます。私はそれらを両方ともアクティブにしておくことができますか？

これは私のコードです：

https://jsfiddle.net/0x43v59b/2/

HTML：

<div class="header-box"> 
    <div class="header-click"> 
    <h5>Publish Year</h5> 
    </div> 
    <div class="no-display"> 
    <p>test1</p> 
    </div> 
</div> 

<div class="header-box"> 
    <div class="header-click"> 
    <h5>Condition</h5> 
    </div> 
    <div class="no-display"> 
    <p>test2</p> 
    </div> 
</div> 

<script> 
    $('.header-click').on('click', function() { 
    $parent_filter = $(this).closest('.header-box'); 
    $parent_filter.siblings().find('.no-display').slideUp(); 
    $parent_filter.find('.no-display').slideToggle(500, 'swing'); 
    }); 
</script> 

CSS：

.header-click { 
    cursor: pointer; 
} 
.no-display { 
    display: none; 
} 
.header-box { 
    margin-bottom: 15px; 
} 

Answer 1

あなたはちょうどこのラインを取り除く必要があります。 $parent_filter.siblings().find('.no-display').slideUp();

ここ

その 'の.NO-表示' クラスを持つすべての兄弟をチェックし、それらをスライド

<script> 
    $('.header-click').on('click', function() { 
    $parent_filter = $(this).closest('.header-box'); 
    //$parent_filter.siblings().find('.no-display').slideUp(); 
    $parent_filter.find('.no-display').slideToggle(500, 'swing'); 
    }); 
</script> 

Answer 2

$('.header-click').on('click', function() { 
    $(this).parent().find('.no-display').slideToggle(500,'swing');  
    }); 

Answer 3

が更新jqueryの関数である：

$('.header-click').on('click', function() { 
    $parent_filter = $(this).closest('.header-box'); 
    //$parent_filter.siblings().find('.no-display').slideUp(); 
    $parent_filter.find('.no-display').slideToggle(500, 'swing'); 
    }); 

Answer 4

あなたはこのコードを使用することができ、作品よくあなたの状態のために：

$('.header-click').on('click', function() { 
 
    $parent_filter = $(this).next('.no-display'); 
 
    if ($parent_filter.is(":hidden")) { 
 
     $parent_filter.slideDown(); 
 
    } else { 
 
     $parent_filter.slideUp(); 
 
    } 
 
    });

.header-click { 
 
    cursor: pointer; 
 
} 
 
.no-display { 
 
    display: none; 
 
} 
 
.header-box { 
 
    margin-bottom: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Year Filter --> 
 
<div class="header-box"> 
 
    <div class="header-click"> 
 
    <h5>Publish Year</h5> 
 
    </div> 
 
    <div class="no-display"> 
 
    <p>test1</p> 
 
    </div> 
 
</div> 
 
<!-- Condition Filter --> 
 
<div class="header-box"> 
 
    <div class="header-click"> 
 
    <h5>Condition</h5> 
 
    </div> 
 
    <div class="no-display"> 
 
    <p>test3</p> 
 
    </div> 
 
</div>

Answer 5

上記のすべての回答が正しいと思いますが、これを達成するもう1つの方法です。

Answer 6

これは私が作ったスクリプトです、これがあなたが望むものであることを望みます。

<script> 
    $(document).ready(function(){ 
    $(document).on('click','.header-click',function(){ 

     $(this).next().slideToggle(500,'swing'); 

     }); 
    }); 
    </script>