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>
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>
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");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.