gpt4 book ai didi

jquery - 下拉菜单 jquery 切换项目

转载 作者:可可西里 更新时间:2023-11-01 13:24:30 26 4
gpt4 key购买 nike

我对 jQuery 下拉菜单有疑问。我的代码:

$('.item-active, .item').click(function() { 
$(this).toggleClass('item-active');
if($('h3').hasClass('item-active')) {
$(this).siblings().css( 'display', 'block' );
}

$(this).toggleClass('item');
if($('h3').hasClass('item')) {
$(this).siblings().css( 'display', 'none' );
}
});
<div>
<h3 class="item-active">item 1</h3>
<div class="item-desc">Lorem Lorem</div>
</div>
<div>
<h3 class="item">item 2</h3>
<div class="item-desc">Lorem Lorem</div>
</div>
<div>
<h3 class="item">item 3</h3>
<div class="item-desc">Lorem Lorem</div>
</div>

我所需要的只是在单击相关的 h3 时切换菜单。此外,同一时间只能激活一个项目(其余描述应隐藏)

最佳答案

要解决这个问题,您可以简单地使用 removeClass() 从所有元素中删除 .item-active 类,然后再将其切换到被点击的元素上。

另请注意,您可以通过使用 + 同级运算符将 JS 代码简化为仅修改类,而让 CSS 隐藏/显示 .item-desc。试试这个:

$('.item').click(function() {
$('.item').not(this).removeClass('item-active');
$(this).toggleClass('item-active');
});
.item-active {
color: #C00;
}
.item-desc {
display: none;
}
.item-active + .item-desc {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h3 class="item item-active">item 1</h3>
<div class="item-desc">Lorem Lorem</div>
</div>
<div>
<h3 class="item">item 2</h3>
<div class="item-desc">Lorem Lorem</div>
</div>
<div>
<h3 class="item">item 3</h3>
<div class="item-desc">Lorem Lorem</div>
</div>

关于jquery - 下拉菜单 jquery 切换项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40972604/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com