如何以编程方式打开我的手风琴菜单

我正在使用一个非常简单的jQuery手风琴脚本，但是我想实现的是以编程方式在页面加载时打开菜单项的方法。最终，当用户直接浏览子菜单中的页面时，该菜单将打开以识别它们的位置。我只是无法弄清楚如何触发负载开放...任何帮助表示赞赏。如何以编程方式打开我的手风琴菜单

<!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>

来源

2015-09-01 Joel Bondoux

您可以在活动类手动应用的元素，然后在文件准备的slideToggle与活跃类的元素。例如：

在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'); 

});

这应该工作。

我也建议是增加额外的课程对那些菜单元素，而不是使用这种复合选择。

来源

2015-09-01 13:51:07 Voreny

感谢所有的建议 - 这是一个我去了，虽然和它工作得很好。 –

只要将代码放在$(document).ready(function() { ... });内，就可以使其在加载时运行（文档准备就绪后）。要打开正确的手风琴，您可以使用window.location来获取您的URL，以确定用户所在的页面并相应地打开手风琴。

通过将id添加到菜单中，可以更轻松地进行此操作，以便您轻松选择并打开它。

来源

2015-09-01 13:51:33 bransonl

你必须使用location或pathname（这是由你），以便与您的手风琴HREFs比较当前网页。

Here is an exemple

加js：

var pagePath = window.location.pathname; // To be used 
var splitedPath = pagePath.split("/"); //Split to match your href formating 


//Find A tag that match your path, find its parent UL and the A tag before (the one which has click event); 
$("#nav > li > ul > li > a[href='" + splitedPath[splitedPath.length - 1] + "']").closest("ul").prev("a").trigger("click");

首先得到该位置/路径
拆分它，以符合当前的href格式化
选择父A到模拟点击

来源

2015-09-01 14:10:10 EdenSource

如何以编程方式打开我的手风琴菜单

回答

相关问题