jQuery Toggle Width Logic

Question

Ich versuche, Tabs beim Klicken zu erweitern/zu reduzieren, damit der Benutzer einfach sehen kann, auf welchem ​​Tab er sich gerade befindet.

Ich denke, was ich tun möchte, ist durch <div class="sidebar"> Kinder zu durchlaufen und überprüfen Sie jeweils für .hasClass('clicked'). Wenn ich während der Durchquerung ein Kind mit der Klasse .clicked finde, möchte ich dort anhalten, .removeClass() und .addClass('clicked') auf die Registerkarte, auf die ursprünglich geklickt wurde.

Ich bin mir nicht sicher, wie das geht oder ob das überhaupt der richtige Weg ist.

$(".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

Sie können nur die Klasse in der geklickt Sidebar Element hinzufügen und entfernen Sie sie dann aus [all seine Geschwister] https://api.jquery.com/siblings/) in einem Rutsch, etwa so:

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

Answer 2

Vielleicht möchten Sie es einfach ohne den Test zu entfernen. Dies scheint zu tun, was Sie suchen.

$(".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>