Question

我用它来显示子列表：

    function slidecontent() {
        $('ul.joinus_subtext').slideToggle();
    }

我有这个标记：

    <ul class="joinus">
        <li onclick="slidecontent();">Benefactor
            <ul class="joinus_subtext">
                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
            </ul>
        </li>
        <li onclick="slidecontent();">Protector
            <ul class="joinus_subtext">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
            </ul>
        </li>
    </ul>

我遇到的问题是，当我点击一个 LI时，它会切换所有，而不仅仅是这个，

我想要实现的是，如果我点击一个，它会显示其内容，如果我点击另一个，那么它会隐藏那个打开的那个并打开我点击的那个。任何想法如何做到这一点？

Answer 1

使用<li>

上的课程

<li class="liclass">

为其添加一个监听器：

$('.liclass').on('click',function(){
    $(this).slideToggle();
});

Answer 2

您使用的$('ul.joinus_subtext')选择器将为您提供ul所有joinus_subtext类，slideToggle函数将应用于所有这些选项卡，传递父对象要滑动到javascript函数的元素，并将其作为selector传递给context。

<强> Live Demo

HTML 的

<li onclick="slidecontent(this);">Benefactor

的Javascript

function slidecontent(sourceObj) {
    $('ul.joinus_subtext', sourceObj).slideToggle();
}

Answer 3

<ul class="joinus">
    <li>Benefactor
        <ul class="joinus_subtext">
             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
        </ul>
    </li>
    <li>Protector
        <ul class="joinus_subtext">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
        </ul>
    </li>
</ul>

从li element中删除onclick，然后添加以下jQuery

$( document ).ready( function () {
    $( '.joinus_subtext' ).click( function () {
        $( this ).slideToggle()
    });
});

Slidetoggle jquery打开所有而不是隐藏其他li

3 个答案: