Закрывается выпадающее меню при нажатии на пункт внутри него

Question

При нажатии на любой 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')
}); ```

Answer 1

В item добавил span, который слушаю и при клике открываю соседний submain

$('.item span').on('click',function(){
  $(this).siblings('.submain').toggle('easing')
  $(this).siblings('.fa').toggleClass('rotate')
});

.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 span {
  display: inline-block;
  width: 100%;
}

  <div class="dropdown-menu">
    <ul class="main-item">
        <li class="item">
            <span>Длина</span>
            <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">
            <span>Цена</span>
            <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">
            <span>Толщина</span>
            <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">
            <span>Количество в упаковке</span>
            <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>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

БЛОГ НА HUSL

Закрывается выпадающее меню при нажатии на пункт внутри него

Ответы (1 шт):