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

Question

嗯，他试图在关闭下拉菜单后，删除.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>

Answer 1

如果我完全理解你的意思，这可能是你的解决方案。您需要检查单击的项是否已经有一个活动类，并将该类添加/删除到活动元素中。

此外，可以在单击选定的打开图元的子图元时折叠该图元。

类似这样的东西：

$('.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
});

希望这对你有所帮助。：)