gpt4 book ai didi

javascript - 加载时自动切换展开/折叠箭头

转载 作者:行者123 更新时间:2023-11-28 12:21:40 24 4
gpt4 key购买 nike

我创建了一个垂直列表菜单,其中包含某些菜单项。单击任何菜单项时,列表将展开以显示其内部子菜单项。

此外,当页面加载时,其中一个菜单会根据页面自动展开。我为此使用了 jquery toggle,它工作正常。

现在我在这个菜单中放置了折叠/展开箭头,类似于 jquery accordian 中的菜单。然后他们切换点击事件。

我的问题是,当页面加载时,其中一个菜单项折叠但箭头不会随之折叠,当我再次单击该菜单以折叠/切换回来时,箭头开始切换。

情况可以看成,On loading window -

►Menu1

子菜单

子菜单

子菜单

►Menu2

►Menu3

►Menu4

如您所见,menu1 的箭头没有向下。

到目前为止我的代码 -

<ul>
<div class="option-heading">
<li onclick="menu()"> //menu is the vertical menu which shows up.
<a href="#" >
<div class="arrow-up">&#9658;</div>
<div style="display: none;" class="arrow-down">&#9660;</div>
</a>
</li>
</div>
</ul>

<script>
$(document).ready(function() {
$(".option-heading").click(function(){
$(this).find(".arrow-up, .arrow-down").toggle();
});
});

我使用了 .load,但它会同时展开所有箭头。

我只想知道在加载窗口时切换特定元素的方法。这样其他元素就不会受到它的影响。就像现在的情况是带箭的。每当触发加载事件时,它都会切换所有箭头。

最佳答案

$(this)指的是.option-heading;任何选项标题(这就是为什么所有箭头都被切换的原因)。您应该向事件选项标题添加一个类,以使其独一无二。

像这样的东西可能会完成这项工作:

$(document).ready(function() {
$(".option-heading").click(function(){
$(".option-heading").removeClass("active");
$(this).addClass("active");
$(".option-heading.active").find(".arrow-up, .arrow-down").toggle();
});
});

关于javascript - 加载时自动切换展开/折叠箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18822072/

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