При нажатии на любой subitem закрывается submain, в котором он находится. Как сделать так чтобы этого не происходило?
<div class="dropdown-menu">
<ul class="main-item">
<li class="item">
Длина
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<ul class="submain none">
<li class="subitem">
<input type="checkbox">
</li>
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
</ul>
</li>
<li class="item">
Цена
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<ul class="submain none">
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
</ul>
</li>
<li class="item">
Толщина
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<ul class="submain none">
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
</ul>
</li>
<li class="item">
Количество в упаковке
<i class="fa fa-arrow-up" aria-hidden="true"></i>
<ul class="submain none">
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
<li class="subitem">
Блаблабла
</li>
</ul>
</li>
</ul>
</div>
.none{
display: none;
}
.dropdown-menu {
}
.main-item {
width: 270px;
max-height: 681px;
box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.1);
padding: 0;
}
.fa{
float: right;
padding-right: 12px;
line-height: 24px;
}
.rotate{
transform:rotate(0.5turn);
padding-left: 12px;
}
.item {
padding-left: 15px;
list-style-type: none;
color: #333333;
border-bottom: solid 1px #E5E5E5;
cursor: pointer;
line-height: 24px;
font-weight: 700;
}
.item:last-of-type{
border-bottom: none;
}
.submain {
padding: 0;
cursor: pointer;
}
.subitem {
list-style-type: none;
color: #E5E5E5;
font-size: 14px;
padding: 7px 0;
font-weight: 400;
}
.subitem:hover{
color: #333333;
cursor: pointer;
}
$('.item').on('click',function(){
$('.submain',this).toggle('easing')
$('.fa',this).toggleClass('rotate')
}); ```