如果我在jQuery中单击其他切换类或元素，将如何关闭活动切换类？

Question

When I click on any .show I want to close all .list and open just the one I clicked.

I've tried this, but it's not working as expected.

  $('.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

If I understand your question, the simplest way will be to add a class to each li and div that is the same and use jquery's next() function

 $('.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

Your question is a bit unclear, but after playing with the code you provided, I think I've figured out what you want.

Is this correct? 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");
});