1

我用它来显示一个子列表:

    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 时,它会切换所有,而不仅仅是这个

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

4

3 回答 3

0

使用一个类<li>

<li class="liclass">

给它添加一个监听器:

$('.liclass').on('click',function(){
    $(this).slideToggle();
});
于 2013-02-11T11:20:03.210 回答
0

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

现场演示

html

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

Javascript

function slidecontent(sourceObj) {
    $('ul.joinus_subtext', sourceObj).slideToggle();
}
于 2013-02-11T11:21:03.500 回答
0
<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>

从你的onclick中删除li element,然后添加followign jQuery

$( document ).ready( function () {
    $( '.joinus_subtext' ).click( function () {
        $( this ).slideToggle()
    });
});
于 2013-02-11T11:22:22.413 回答