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>

私が抱えている問題は、1 つのLIをクリックすると、この 1 つだけでなく、すべてが切り替わることです。

私が達成したいのは、一方をクリックするとそのコンテンツが表示され、もう一方をクリックすると開いていたものが非表示になり、クリックしたものが開くことです。これを行う方法はありますか？

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 に答える