使有序列表可折叠

Make ordered list collapsible

本文关键字：可折叠 列表      更新时间：2023-09-26

我有一个有序列表，我想让它默认可折叠，并在用户单击链接时展开。

https://jsfiddle.net/rkmv3rn3/17/

如何使其正常工作

使用以下脚本，它会折叠所有父项，然后无法正确打开它们。

$(window).load(function() {
  prepareList();
});
function prepareList() {
  $('#expList').find('li:has(ol)')
  .click(function(event) {
    if (this == event.target) {
      $(this).toggleClass('expanded');
      $(this).children('ol').toggle('medium');
    }
    return false;
  })
  .addClass('collapsed')
  .children('ol').hide();
  //Create the button funtionality
  $('#expandList')
  .unbind('click')
  .click(function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
  })
  $('#collapseList')
  .unbind('click')
  .click(function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
  });
};
.page-left-bar {
  width: 200px;
  background-color: #fff;
}
ol {
  margin-left: 0px;
  padding-left: 20px;
}
.handbook-page ol {
  color: #687074;
  counter-reset: item;
}
ol {
  counter-reset: item;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>LIST OL  child list alignment</h1>
<div class="page-left-bar">
  <ol id='#expList'>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a>
      <ol>
        <li><a href="#home">Sub menu</a></li>
        <li><a href="#news">Sub menu long name</a></li>
        <li><a href="#contact">Sub menu</a></li>
        <li><a href="#about">Sub menu</a></li>
      </ol>
    </li>
    <li><a href="#about">About </a>
      <ol>
        <li><a href="#home">Mission</a></li>
        <li><a href="#news">Vision</a></li>
        <li><a href="#contact">Sub menu</a></li>
        <li><a href="#about">Sub menu</a></li>
      </ol>
    </li>
  </ol>
</div>

如果要切换子菜单的可见性。首先从 HTML 中的 id #expList中删除#，如@MoshFeu所述。

<ol id='expList'>

然后你可以简单地这样做。

$(document).ready(function(){
  $("#expList").find("ol").hide();
  $("#expList > li").click(function(){
    $(this).find("ol").slideToggle();
  });
});

看到这个小提琴

相关文章：