如何使用嵌套的 ul 列表显示/隐藏 div 内容

Question

我有一个嵌套的 ul 列表，其中包含用作导航以在同一页面上显示/隐藏隐藏 div 的链接。嵌套的工作方式类似于手风琴。

隐藏的 div 的 id 与其对应的导航链接的 href 相同。我可以显示/隐藏没有孩子的 li 的潜水，但我不知道如何使这也适用于有孩子的 li。

这是我的html：

// Nav
<nav class="mtpd-manual-menu">
    <ul>
        <li><a href="#chiefs-preface" class="active">Chief's Preface</a>
        </li>
        <li><a href="#law-enforcement-code-of-ethics">Law Enforecement Code of Ethics</a></li>
        <li><a href="#mission-statement-and-core-values">Mission Statement and Core Values</a></li>
        <li>Law Enforcement Role and Authority
            <ul>
                <li><a href="#100-law-enforcement-authority">100 - Law 
Enforcement Authority</a></li>
                <li><a href="#102-chief-executive-officer">102 - Chief 
Executive Officer</a></li>
                <li><a href="#104-oath-of-office">104 - Oath of Office</a>
                </li>
                <li><a href="#106-policy-manual">106 - Policy Manual</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

// Div content
<div id="chiefs-preface" style="display: block;">
    <h2>Chief's Preface</h2>
    <p>Div 1 content...</p>
</div>
<div id="law-enforcement-code-of-ethics">
    <h2>Law Enforcement Code of Ethics</h2>
    <p>Div 2 content...</p>
</div>
<div id="mission-statement-and-core-values">
    <h2>Mission Statement and Core Values</h2>
    <p>Div 3 content</p>
</div>
<div id="law-enforcement-role-and-authority">
    <h2>Law Enforcement Role and Authority</h2>
    <div id="100-law-enforcement-authority">
        <h3>100 - Law Enforcement Authority</h3>
        <p>Div 4 content...</p>
    </div>
    <div id="102-chief-executive-officer">
        <h3>102 - Chief Executive Officer</h3>
        <p>Div 5 content...</p>
    </div>
</div>

这是我的 jquery：

// Expand Collapse list
$('.mtpd-manual-menu li').click(function(e){
    if( $(this).find('>ul').hasClass('active') ){
        $(this).css('background-image', 'url("/Data/Sites/1/skins/MetroTransitII/images/PlusSmall.gif")').children('ul').removeClass('active').slideUp();
    e.stopPropagation();
    }
    else{
        $(this).css('background-image', 'url("/Data/Sites/1/skins/MetroTransitII/images/MinusSmall.gif")').children('ul').addClass('active').slideDown();
    e.stopPropagation();
    }
});

// Show content based on link clicked.
$('.mtpd-manual-menu a').click(function(e) {
    e.preventDefault();
    $('.left-col div').hide();
    $('.mtpd-manual-menu li a').removeClass('active'); // remove any existing 'active' classes.
    $(this).addClass('active'); // add class to currently active link.
    var id = $(this).attr('href'); // Get href of active link.
    $(id).show(); // Show div with matching id of active link href.
});

Answer 1

所以虽然我的 HTML 不完整，但我也注意到我不需要嵌套的 div。所以删除父 div 解决了我的问题。