Question

我正在使用网上找到的js查询制作的手风琴菜单。最初由Ryan Stemkoski开发。我将手风琴菜单用作导航，并希望在单击特定链接并加载其相应页面时使其保持打开状态。下面是js脚本

$(window).load(function() {
  $(document).ready(function() {
   jQuery("a.mainCategoryCollapsible").click(function() {
     jQuery("ul.panel").slideUp("normal");
      jQuery(this)
      .next()
      .slideDown("normal");
      });
   });
});

下面是html

<a class="mainCategory" >Menu1</a>
<ul class="panel ">
    <li>
        <a class="subCategory" href="item1.html " >Item1</a>
    </li>
    <li>
        <a class="subCategory" href="item2.html " >Item2</a>
    </li>
    <li>
        <a class="subCategory" href="item3.html " >Item3</a>
    </li>
</ul>
</li>
</br>
<li>
<a class="mainCategory ">Menu2</a>
<ul class="panel ">
    <li>
        <a class="subCategory" href="m2_item1.html " >Item1</a>
    </li>
    <li>
        <a class="subCategory" href="m2_item2.html " >Item2</a>
    </li>
    <li>
        <a class="subCategory" href="m2_item3.html " >Item3</a>
    </li>
</ul>
</li>

下面是CSS

.mainCategory {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #111111;
  text-transform: uppercase;
}

.subCategory {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #505050;
  text-transform: capitalize;
}

.panel {
  padding-top: 5px;
  margin: none;
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  z-index: 500;
}

我不是JS方面的专家。感谢您提供的帮助和线索。

Answer 1

您的JS代码中有一个简单的错字。

将HTML中不存在的a.mainCategoryCollapsible选择器更改为现有的a.mainCategory选择器

Answer 2

为需要管理的元素提供一个ID很有帮助，例如，请注意，这里我为菜单添加了ID。

<a class="mainCategory" id="menu1">Menu1</a>
  <ul class="panel ">
    <li>
      <a class="subCategory" href="item1.html ">Item1</a>
    </li>
    <li>
      <a class="subCategory" href="item2.html ">Item2</a>
    </li>
    <li>
      <a class="subCategory" href="item3.html ">Item3</a>
    </li>
  </ul>
  <br />

    <a class="mainCategory" id="menu2">Menu2</a>
    <ul class="panel ">
      <li>
        <a class="subCategory" href="m2_item1.html ">Item1</a>
      </li>
      <li>
        <a class="subCategory" href="m2_item2.html ">Item2</a>
      </li>
      <li>
        <a class="subCategory" href="m2_item3.html ">Item3</a>
      </li>
    </ul>

您可以简化此jquery

$(document).ready(function() {
  $("#menu1").next().css('display', 'block'); /* In this line you assign the menu you want to show, accessing the id with the # */

  $(".mainCategory").click(function() {
    $(".panel").slideUp("normal");
    $(this)
      .next()
      .slideDown("normal");
  });
});

工作示例https://plnkr.co/edit/Ba165CAOEBpw61vIVqsY?p=preview

在页面加载/刷新时保持手风琴菜单打开

2 个答案: