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

您可能希望在没有测试的情况下将其删除。这似乎可以满足您的需求。

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以将该类添加到单击的侧边栏项目中，然后一次性将其从[所有兄弟姐妹] https://api.jquery.com/siblings/）中删除，如下所示：

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

jQuery切换宽度逻辑

2 个答案: