0 
<li class="list "><a href="javascript:">A</a>

    <ul class="names">
        <li class="list"><a href="javascript:">1</a>
        </li>
        <li class="list"><a href="javascript:">2</a>
        </li>
    </ul>
</li>
<li class="list "><a href="javascript:">B</a>

    <ul class="names selected">
        <li class="list selected"><a href="javascript:">1</a>
        </li>
        <li class="list"><a href="javascript:">2</a>
        </li>
        <li class="list"><a href="javascript:">3</a>
        </li>
        <li class="list"><a href="javascript:">4</a>
        </li>
    </ul>
</li>
<li class="list "><a href="javascript:">C</a>

    <ul class="names">
        <li class="list"><a href="javascript:">1</a>
        </li>
        <li class="list"><a href="javascript:">2</a>
        </li>
        <li class="list"><a href="javascript:">3</a>
        </li>
        <li class="list"><a href="javascript:">4</a>
        </li>
    </ul>
</li>

    $('.list').click(function () {
        var that = this;
        $('.list').each(function () {
            if (that == this) return true; //continue
            $('.names:not(:hidden)', this).slideToggle();
        });
        $('ul.names', this).slideToggle();
    })
ul.names{display: none;}
li.list{
    width:150px;
       background:#A9FF7A;
}
ul.names {
    width:150px;
    background:#A9FF7A;
}
ul.selected{
    display: block;
}
li.selected{
    background:red;
}

オンライン サンプル: http://jsfiddle.net/gyYyd/

Bのサブメニュー1が強調表示されます。メニューAまたはCをクリックすると、AまたはCセクションが開きますが、ページ空白領域（背景色の外側）をクリックしてBセクションに戻る（Bセクションを開く）にはどうすればよいですか

前もって感謝します

4

1 に答える 1

1

オブジェクトでをキャプチャclickし、必要なリスト項目でdocumentをトリガーできます。click

$(document).click(function() {
    var selected = $('.selected:first');
    if(!selected.closest('ul.names').is(':visible')) {
        selected.closest('.list').trigger('click');
    }
});

また、リスト項目の通常のクリックが上記のハンドラーに伝達されないようにreturn false、現在のリスト項目clickハンドラーから確認してください。

デモ: http://jsfiddle.net/gyYyd/2/

于 2013-03-29T09:59:47.890 に答える