在不改变HTML的情况下将列表结构转换为手风琴

Question

我发现了各种jQuery脚本，部分工作(他们使部分文本消失，但中断重新出现，父和子消失点击等)，但由于我是非常新的jQuery我不能真正使我自己的修复或知道如何使其他脚本适合我的问题。

如何将下面的列表结构转换为手风琴，在其中单击标题会拉下内容?

不幸的是，这个web应用程序不允许修改HTML，所以只有脚本和CSS解决方案可以工作。

<ul>
    <li class="static selected">
        <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#">
            <span class="additional-background ms-navedit-flyoutArrow">
                <span class="menu-item-text">Header1</span>
            </span>
        </a>
        <ul class="static">
            <li class="static">
                <a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#">
                    <span class="additional-background ms-navedit-flyoutArrow">
                        <span class="menu-item-text">Content1</span>
                    </span>
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

这是我使用jQuery的方法。

$(function(){
    var hiddens = $('.menu-item + ul');         // Select all hiddens
    hiddens.each(function() {                   // Loop through all hiddens
        var hidden = $(this);                   // Save $(this) for later
        $(this).parent().click(function(e) {    // Catch the parent's click event
            hiddens.each(function(){            // Loop through all hiddens
                if(!$(this).is(hidden))         // Check if the current element 
                                                // is the one we want to toggle,
                    $(this).removeClass('show');// Hide it otherwise
            });
        	hidden.toggleClass('show');         // Toggle the selected hidden
            e.stopPropagation();                // Stop this event from bubbling
        });
        $(this).click(function(e) {
            e.stopPropagation();                // Stop this event from bubbling
        });
    });
    $(document).click(function(e) {             // Hide all shown hiddens.
        hiddens.filter('.show').removeClass('show');
    });
});

.menu-item + ul {
    display: none;                          /* Hide all hiddens */
}
.menu-item + ul.show {
    display: block;                         /* Show only the current hidden */
}

<!-- This HTML is used for the purposes of this demo, no changes made -->                                                                          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li><li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Header1</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="#"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Content1</span></span></a></li></ul></li></ul>