使有序列表可折疊

Question

我有一個有序列表，我想在用戶單擊鏈接時默認使其可折疊並展開。

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> 

Answer 1

如果要切換子菜單的可見性。 首先像@MoshFeu所說的那樣從HTML的id #expList中刪除# 。

<ol id='expList'>

然后，您可以像這樣簡單地進行操作。

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

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

看到這個小提琴