детей и проверить каждого из них .hasClass(" />

jQuery Toggle Width Logic

jquery css

88 просмотра

2 ответа

32 Репутация автора

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

Я думаю, что я хочу сделать, это пройти через <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>

Автор: Toni Au Источник Размещён: 18.07.2016 10:16

Ответы (2)


0 плюса

3597 Репутация автора

Вы можете просто удалить его без теста. Кажется, это делает то, что вы ищете.

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

Автор: JonSG Размещён: 18.07.2016 10:19

0 плюса

11631 Репутация автора

Решение

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

$(".sidebar").on("click", ".item", function() {
    $(this).addClass("clicked").siblings(".item").removeClass("clicked");
    return false;
});
Автор: Sverri M. Olsen Размещён: 18.07.2016 10:20
Вопросы из категории :
32x32