jqueryの他のトグルクラスや要素をクリックすると、アクティブなトグルクラスを閉じる方法は？

Question

私がanyshowをクリックすると、すべての.listを閉じて、クリックしたものだけを開きたいと思います。

私はこれを試しましたが、期待どおりに動作していません。私はあなたの質問を理解していれば

$('.show').click(function(){ 
 
     $('.list1').toggleClass("displaylist"); 
 
    }); 
 
    $('.show2').click(function(){ 
 
     $('.list2').toggleClass("displaylist"); 
 
    }); 
 
    $('.show3').click(function(){ 
 
     $('.list3').toggleClass("displaylist"); 
 
    });

.list1, list2,list3{display:none;} 
 
    .displaylist{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="show"></li> 
 
    <div class="list1"> 
 
     <select> 
 
      <option></option> 
 
     </select> 
 
    </div> 
 
    <li class="show2">list2</li> 
 
    <div class="list2"> 
 
     <select> 
 
      <option></option> 
 
     </select> 
 
    </div> 
 
    <li class="show3"></li>

Answer 1

、最も簡単な方法は同じと使用jQueryのnext()機能で各Liとdiv要素にクラスを追加することであろう

$('.show').click(function(){ 
 
    $('.list').hide(); 
 
    $(this).next().show(); 
 
});

.list 
 
{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="show">List 1</li> 
 
<div class="list"> 
 
    <select> 
 
    <option></option> 
 
    </select> 
 
</div> 
 

 
<li class="show">List 2</li> 
 
<div class="list"> 
 
    <select> 
 
    <option></option> 
 
    </select> 
 
</div> 
 

 
<li class="show">List 3</li> 
 
<div class="list"> 
 
    <select> 
 
    <option></option> 
 
    </select> 
 
</div>

Answer 2

あなたの質問は少し不明ですが、あなたが提供したコードで遊んでいると、私はあなたが望むものを見つけたと思う。

これは間違いありませんか？ https://jsfiddle.net/u5cqLwk3/

HTML

<li class="show show1">list1</li> 
<div class="list list1"> 
    <select> 
     <option></option> 
    </select> 
</div> 
<li class="show show2">list2</li> 
<div class="list list2"> 
    <select> 
     <option></option> 
    </select> 
</div> 
<li class="show show3">list3</li> 
<div class="list list3"> 
    <select> 
     <option></option> 
    </select> 
</div> 

CSS

.list {display: none} 
.displaylist{display:block;} 

JS

$('.show').click(function(){ 
    $('.list').removeClass("displaylist"); 
}); 
$('.show1').click(function(){ 
    $('.list1').addClass("displaylist"); 
}); 
$('.show2').click(function(){ 
    $('.list2').addClass("displaylist"); 
}); 
$('.show3').click(function(){ 
    $('.list3').addClass("displaylist"); 
});