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

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

隐藏的div的id与对应导航链接的href相同。我可以和并没有孩子的李娜一起表演/隐藏跳水，但我不知道如何让这也适用于有孩子的李娜

这是我的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>

---

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

我认为您的HTML代码不完整。请提供更多详细信息谢谢！是的，我看到我的HTML不完整。另外，再次查看需求，我添加了一个不必要的嵌套div。

// 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.
});