gpt4 book ai didi

javascript - 如何以编程方式打开我的 Accordion 菜单

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

我正在使用一个非常简单的 jQuery Accordion 脚本,但我想要实现的是一种在页面加载时以编程方式打开菜单项的方法。最终,当用户直接浏览到子菜单中的页面时,该菜单将打开以识别他们所在的位置。我只是不知道如何在加载时触发打开...任何帮助表示赞赏。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery navigation test 2</title>

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>


<style>

#nav {
float: left;
width: 280px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li a {
display: block;
padding: 10px 15px;
background: #ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none;
}
#nav li ul li a {
padding: 10px 25px;
background: #ececec;
border-bottom: 1px dotted #ccc;
}

</style>
</head>

<body>
<ul id="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-Item 1 a</a></li>
<li><a href="#">Sub-Item 1 b</a></li>
<li><a href="#">Sub-Item 1 c</a></li>
</ul>
</li>
<li><a href="https://google.com">Link 1</a>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-Item 3 a</a></li>
<li><a href="#">Sub-Item 3 b</a></li>
<li><a href="#">Sub-Item 3 c</a></li>
<li><a href="#">Sub-Item 3 d</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-Item 4 a</a></li>
<li><a href="#">Sub-Item 4 b</a></li>
<li><a href="#">Sub-Item 4 c</a></li>
</ul>
</li>
<li><a href="https://google.com">Link 2</a>
</li>
</ul>

<script type="text/javascript">
$(document).ready(function () {

$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$(this).next().slideToggle();
$(this).addClass('active');
}
else {
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
}
});

});

</script>
</body>
</html>

最佳答案

您可以手动将事件类应用到元素,然后在文档准备好时使用 active 类滑动切换元素。例如:

在 HTML 中:

<li><a href="#" class="activate-on-load">Menu 3</a>
<ul>
<li><a href="#">Sub-Item 4 a</a></li>
<li><a href="#">Sub-Item 4 b</a></li>
<li><a href="#">Sub-Item 4 c</a></li>
</ul>
</li>

在 Javascript 部分:

$(document).ready(function () {

$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$(this).next().slideToggle();
$(this).addClass('active');
}
else {
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
}
});

var toActivate = $('.activate-on-load');
toActivate.next().slideToggle();
toActivate.addClass('active');

});

这应该有效。

 

我还建议为这些菜单元素添加额外的类,而不是使用如此复杂的选择器。

关于javascript - 如何以编程方式打开我的 Accordion 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32333255/

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