0

たとえば、ネストされたリストがあります。

<ul id="navigation">
    <li id="home">
        <ul id="sub_menus">
            <li id="about_us">
                <div class="same>
                    ... content ...
                </div>
            </li>
            <li id="contact_us">
                <div class="same>
                    ....... content ...
                </div>
            </li>
        </ul>
    </li>
</ul>

そして、私はこのJQueryを持っています:

$('#sub_menus > li').click(function () {
    $action = $('.same').css("display");
        if ($action == "none") {
            $('??????').css("display", "block");
        } else {
            $('??????').css("display", "none");
        }
});

li#about_us または li#contact_us をクリックしたときに div.same を表示するには、どのセレクターを使用すればよいでしょうか。クラス .same を選択すると、両方のメニューが表示/非表示になりますが、親がクリックされているものだけを表示したいです。

4

2 に答える 2

2

div.sameクリックした LI の子孫であるを見つけるには、次を使用します。

$(this).find('.same')

あなたの例では、あなたが望むのは次のとおりです。

$('#sub_menus > li').click(function () {
    $(this).find('.same').toggle(); // display if hidden, hide if displayed
});

.css()(ショートカットの代わりに) ステートメントを使用して表示を切り替えたい場合は.toggle()、次を使用できます。

$('#sub_menus > li').click(function () {
    var same = $(this).find('.same'),
        display = same.css('display');
    same.css('display', display === 'block' ? 'none' : 'block');
});
于 2013-05-11T23:41:15.100 に答える
1

これは、クリック イベントの関数ハンドラーに渡されるイベント オブジェクトを使用して行うことができます。このようなもの$('#sub_menus > li').click(function(event){

コードは次のようになります。

$('#sub_menus > li').click(function(event){
    var $item = $(event.target).children("div.same");

    if ($item.css("display") == "none") {
        $item.css("display", "block");
    }   
    else {
        $item.css("display", "none");
    }
});

thisの代わりにキーワードを使用することもできますがevent.target、イベントには場所やその他のイベント プロパティなどの情報も格納されます。

于 2013-05-11T23:35:06.863 に答える