Menu 如何使用手风琴式下拉菜单在页面重新加载时保持菜单打开?
我试图实现在页面重新加载到单击的链接时保持选中选项卡上的菜单打开 以下是html代码:Menu 如何使用手风琴式下拉菜单在页面重新加载时保持菜单打开?,menu,accordion,Menu,Accordion,我试图实现在页面重新加载到单击的链接时保持选中选项卡上的菜单打开 以下是html代码: <nav> <ul id="nav"> <li><a href="#"><img id="icon" src="icons/setup(48).png" />Setup</a> <ul> <li><a href="test.html">Test</a>
<nav>
<ul id="nav">
<li><a href="#"><img id="icon" src="icons/setup(48).png" />Setup</a>
<ul>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
<li><a href="test.html">Test</a></li>
</ul>
</li>
<li><a href="#"><img id="icon" src="icons/userProfile_48.png" />User Maintenance</a>
</li>
<li><a href="#"><img id="icon" src="icons/projects.png" />Projects</a>
<ul>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
<li><a href="#">Project Title</a></li>
</ul>
</li>
</ul>
</nav>
目前,当选择一个链接并重定向到该页面时,它可以正常工作,但它只是没有在加载的新页面上保持菜单选项卡打开
一些帮助会很好。谢谢
此部分用于帮助在页面加载时保持菜单打开
<script>
$(document).ready(function () {
$("#nav li a").click(function (e) {
if ($(this).next("ul").length > 0) {
e.preventDefault();
var navInner = $(this).next("ul");
if (navInner.is(":visible")) {
}
}
});
});
$(文档).ready(函数(){
$(“#nav li a”)。单击(功能(e){
如果($(this).next(“ul”).length>0){
e、 预防默认值();
var navInner=$(此).next(“ul”);
如果(navInner.is(“:可见”)){
}
}
});
});
您需要将哪个选项卡打开的信息传递到新页面,并在页面加载后重新打开该选项卡 我想到两个选择:
- 在浏览器开始导航到目标URL之前,通过注册onclick事件对其进行修改,将信息附加到链接
- 将信息保存在可以从Javascript访问的会话cookie中
- 我使用相同的脚本
我就是这样解决这个问题的:
<li><a href="#" class="articles <?php echo ($_GET['module'] == 'articles' ? 'open': ''); ?>">Articles</a>
<ul>
<li><a href="admin.php?module=articles">Manager</a></li>
<li><a href="admin.php?module=articles">Categories</a></li>
<li><a href="admin.php?module=articles">Featured</a></li>
<li><a href="admin.php?module=articles">Add</a></li>
</ul>
</li>
您还可以将一些类添加到父级
,其中包含要展开的
对于expample文章,然后在head中:
<script type="text/javascript">
$(document).ready(function(){
$(".menu-list > li > a.articles").next("ul").show();
});
</script>
$(文档).ready(函数(){
$(“.menu list>li>a.articles”).next(“ul”).show();
});
我不知道这是不是正确的方法,但它是有效的;)
$(document).ready(function(){
$("#nav > li > a.open").next("ul").show(); // add this line here
$("#nav > li > a").on("click", function(e){ ............
<script type="text/javascript">
$(document).ready(function(){
$(".menu-list > li > a.articles").next("ul").show();
});
</script>