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

Question

我使用的是一个非常简单的 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>

Answer 1

您可以手动将活动 class 应用于元素，然后在文档准备就绪时使用活动 class 滑动切换元素。例如：

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

});

这应该有效。

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

Answer 2

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

在您的菜单中添加 id 可以使这变得更容易，这样您就可以轻松 select 并打开它。

Answer 3

您必须使用 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");

首先得到location/pathname
拆分它以匹配您当前的 href 格式
Select父A模拟点击

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

How to programmatically open my accordion menu

javascript

jquery

accordion