如何關閉活動切換類，如果我點擊jQuery中的其他切換類或元素？

Question

當我點擊任何.show時，我想關閉所有.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

如果我明白你的問題，最簡單的方法將是一個類添加到每個L1和DIV是相同的，使用jQuery的next()功能

$('.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"); 
});