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

How to programmatically open my accordion menu

本文关键字：我的 手风琴 菜单 方式打 编程      更新时间：2023-09-26

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

您可以手动将活动类应用于元素，然后当文档准备好时，将元素与活动类滑动切换。例如:

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

应该可以。

,

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

将代码放入$(document).ready(function() { ... });将使其在加载时运行(一旦文档准备好)。要打开正确的手风琴，您可以使用window.location来获取您的URL，以确定用户在哪个页面上，并相应地打开手风琴。

这可以通过添加id s到您的菜单，以便您可以轻松地选择和打开它。

您必须使用location或pathname(由您决定)，以便将当前页面与手风琴HREFs进行比较。

下面是一个例子

添加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进行模拟点击

相关文章：