css 如何在关闭下拉列表时从a中删除.active类< div>？jquery

unftdfkk 于 2023-04-13 发布在 jQuery

关注(0)|答案(1)|浏览(278)

好吧，他试图使一旦下拉菜单关闭，.active类（蓝色）被删除，以显示原来的颜色。目前，它只删除当我选择另一个<div>。我从html中删除.active类认为可能是问题，但我认为这是从js代码的东西。我做错了什么？

$(".name").click(function() {
  $(this).next(".submenu").slideToggle();
});

$(".item .name").click(function(){
  $(".name").removeClass("active");
  $(this).addClass("active");
});

$(".submenu li").click(function(){
  $("li").removeClass("active2");
  $(this).addClass("active2");
});

*{
  margin: 0;
  padding: 0;
  color: white;
}
.item {
  width: 350px;
}
.name {
  background: #323232;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item:hover .name, .active {
  padding-left: 15px;
  background: blue;
}
.submenu {
  background: green;
  display: none;
}
.submenu li {
  padding: 5px;
}
li:hover, .active2 {
  background: brown;
}

<div class="menu">
  <div class="item">
    <div class="name">Name One<span>➕</span></div>
    <ul class="submenu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
  <div class="item">
    <div class="name">Name Two<span>➕</span></div>
    <ul class="submenu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

css

来源：https://stackoverflow.com/questions/76001616/how-to-remove-the-active-class-from-a-div-when-closing-a-dropdown-jquery

1条答案

按热度按时间

hc8w905p1#

如果我完全理解你的意思，这可能是你的解决方案。你需要检查是否点击的项目已经有一个活动的类，并添加/删除类到活动的元素。
此外，单击选定的打开图元的子图元时，可以折叠该图元。
就像这样：

$('.name').click(function () {
  const current = $(this);
  
  current.next('.submenu').slideToggle();

  if (current.hasClass('active')) {
    current.removeClass('active');
  } else {
    $('.item .name').removeClass('active'); // First remove active class from all dropdown
    current.addClass('active');
  }
});

$('.submenu li').click(function () {
  $('li').removeClass('active2');
  $(this).addClass('active2');

  $(this).parent().slideToggle(); // Close parent on click
  $(this).parent().prev().removeClass('active'); // Remove parent sibling active class
});

希望这对你有帮助：）

赞(0）回复(0）举报 2023-04-13

我来回答

css 如何在关闭下拉列表时从a中删除.active类< div>？jquery

1条答案

相关问题

热门标签

最新问答