Как закрыть активный класс toggle, если я нажму на другой класс toggle или элементы в 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

Если я правильно понял ваш вопрос, самый простой способ будет добавить класс к каждому Ли и DIV, который next() функция же и использовать JQuery в

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