使有序列表可折叠

Question

我有一个有序列表，我希望它在默认情况下可折叠并在用户单击 link 时展开。

如何让它工作才能正常工作

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

$(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>

Answer 1

如果您想切换子菜单的可见性。正如@MoshFeu 所说，首先从您的 HTML 中的 ID #expList 中删除 #。

<ol id='expList'>

那你就这么简单

$(document).ready(function(){
  $("#expList").find("ol").hide();

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

看到这个fiddle

使有序列表可折叠

Make ordered list collapsible

javascript

jquery

html-lists

jquery-mobile-collapsible