製作有序列表可摺疊

我有一個有序列表，我想在默認情況下進行摺疊並在用戶點擊鏈接時展開。製作有序列表可摺疊

我怎樣才能使它發揮作用，使其正常工作

有了下面的腳本它縮短了所有父項，然後無法正常打開。

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

來源

2016-02-15 Learning

A.取下ID'＃expList'的''＃。 B.當你點擊'contact'這個單詞時，你點擊'a'標籤（'event.target'是'a'），所以this == event.target'總是'false' –

如果你想切換您的子菜單的可見性。 @MoshFeu說，首先在你的HTML中從ID #expList中刪除#。

<ol id='expList'>

然後你可以簡單地這樣做。

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

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

看到這個fiddle

來源

2016-02-15 12:56:26 smdsgn

製作有序列表可摺疊

回答

相關問題