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部分将被打开,但是我如何点击PAGE BLANK区域(背景颜色之外)回到B部分(打开B部分)

提前致谢

4

1 回答 1

1

您可以在对象上捕获clicks并在所需的列表项上document触发 a 。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 回答