Jquery переключатель меню фильтра

Question

Я хочу, чтобы первый фильтр был закрыт, если я нажму второй. Я не могу использовать идентификатор, но только класс и ограничение фильтра не определено. Сначала я подумал использовать .eq (0) .eq (1) et c, но это может быть не лучшим решением.

Может кто-нибудь знает эту проблему?

$(".filter-tab").click(function(){
    if ($(this).find(".filter-pad-checkboxes").css('display') == 'none'){
        $(this).find(".filter-pad-checkboxes").css('display', "block");
        $(this).addClass('selected');
      } else {
        $(this).find(".filter-pad-checkboxes").css('display', "none");
        $(this).removeClass('selected');
      }
});

.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    display: none;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>

Спасибо за решение, оно работает хорошо, решено:)

Answer 1

Просто выключите вещи с классом. Добавлено правило CSS вместо использования блока.

$(".filter-tab").click(function(){
  $(".filter-tab.selected").not(this).removeClass("selected")
  $(this).toggleClass("selected")
});

.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    display: none;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}

.filter-tab.selected .filter-pad-checkboxes {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>

Answer 2

Когда выбран фильтр, найдите другие фильтры, которые не были выбраны, удалите класс из них и скройте их дочерние элементы.

Вы также можете уменьшить свои логики c, сделав CSS Правило основано на селекторе :not(.selected).

var $filterTabs = $(".filter-tab").on('click', function(){
  var $filterTab = $(this);
  
  if ($filterTab.hasClass('selected')) {
    $filterTab.removeClass('selected');
  } else {
    $filterTab.addClass('selected');
    $filterTabs.not(this).removeClass('selected');
  }
});

.filter-tab{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    cursor: pointer;
    height: 38px;
}
.filter-tab:not(.selected) .filter-pad-checkboxes {
  display: none;
}
.filter-tab.selected{
    margin-left: 16px;
    margin-top: -7px;
    padding: 10px 12px 9px 19px;
    display: inline-block;
    font-size: 16px;
    line-height: 19px;
    font-weight: 300;
    color: black;
    background-color: red;
    cursor: pointer;
    border-radius: 100px;
}
.filter-subbar{
    width : 300px;
    margin-left: 30px;
    display: block;
    margin-left: 0px;
}
.filter-pad-checkboxes{
    position: absolute;
    text-align: left;
    border: 1px solid black;
    padding: 16px 54px 24px 27px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="filter-subbar">
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        <li class="filter-tab">
            <p>Filtre</p>
            <ol class="filter-pad-checkboxes">
                <li>Filtre 1</li>
            </ol>
        </li>
        
 </ol>