Question

例如，我有一个嵌套列表：

<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它会显示/隐藏两个菜单，但我只想显示一个菜单被点击的菜单。

Answer 1

要查找作为您点击的LI的后代的div.same，请使用

$(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');
});

Answer 2

您可以使用传递给click事件的函数处理程序的事件对象来执行此操作。像这样$('#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，但该事件还会存储位置和其他事件属性等信息。

如何选择此选择器内部的内容？ JQuery的

2 个答案: