jQuery Toggle Width Logic

Question

Я пытаюсь развернуть/свернуть вкладки по щелчку, чтобы пользователь мог видеть, на какой вкладке они находятся в данный момент.

Я думаю, что я хочу сделать, чтобы пройти через детей <div class="sidebar"> и проверить каждый на .hasClass('clicked'). Во время моего обхода, если я нахожу ребенка, у которого есть класс .clicked, я хочу остановиться там, .removeClass() и .addClass('clicked'), в зависимости от того, какая вкладка была первоначально нажата.

Я не уверен, как это сделать или если это даже правильный подход.

$(".sidebar a").on('click', function() { 
 
     
 
     /*if($(".sidebar").children().hasClass('clicked')){ 
 
      $(this).removeClass('clicked'); 
 
     }*/ 
 
     
 
     $(this).toggleClass('clicked'); 
 
    });

.sidebar { 
 
    position: fixed; 
 
    width: 14.5%; 
 
    top: 0; 
 
    bottom: 0; 
 
    text-decoration: none; 
 
    float: left; 
 
    display: inline-block; 
 
    padding-top: 2%; 
 
    padding-bottom: 2%; 
 
    z-index: 500; 
 
} 
 

 
.sidebar a { 
 
    color: whitesmoke; 
 
    background-color: #404040; 
 
    padding: 26% 20% 26% 15% ; 
 
    text-decoration: none; 
 
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); 
 
    z-index: 800; 
 
    cursor: pointer; 
 
    width: 80%; 
 
} 
 

 
.item { 
 
    display: block; 
 
} 
 

 
.sidebar a.clicked { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sidebar"> 
 

 
    <a href="#" class="item"> Item 1 </a> 
 
    <a href="#" class="item"> Item 2 </a> 
 
    <a href="#" class="item"> Item 3 </a> 
 

 
</div>

Answer 1

Вы можете просто добавить класс к щелкнули боковой панели элемента, а затем удалить его из [всех своих братьев и сестер] https://api.jquery.com/siblings/) на одном дыхании, как так:

$(".sidebar").on("click", ".item", function() { 
    $(this).addClass("clicked").siblings(".item").removeClass("clicked"); 
    return false; 
}); 

Answer 2

Вы можете просто удалить его без проверки. Это похоже на то, что вы ищете.

$(".sidebar a").on('click', function() { 
 
    $(".sidebar").children().removeClass('clicked'); 
 
    $(this).toggleClass('clicked'); 
 
});

.sidebar { 
 
    position: fixed; 
 
    width: 14.5%; 
 
    top: 0; 
 
    bottom: 0; 
 
    text-decoration: none; 
 
    float: left; 
 
    display: inline-block; 
 
    padding-top: 2%; 
 
    padding-bottom: 2%; 
 
    z-index: 500; 
 
} 
 
.sidebar a { 
 
    color: whitesmoke; 
 
    background-color: #404040; 
 
    padding: 26% 20% 26% 15%; 
 
    text-decoration: none; 
 
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 800; 
 
    cursor: pointer; 
 
    width: 80%; 
 
} 
 
.item { 
 
    display: block; 
 
} 
 
.sidebar a.clicked { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sidebar"> 
 

 
    <a href="#" class="item"> Item 1 </a> 
 
    <a href="#" class="item"> Item 2 </a> 
 
    <a href="#" class="item"> Item 3 </a> 
 

 
</div>