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

您可以使用传递给 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，但是该事件还存储位置和其他事件属性等信息。

于 2013-05-11T23:35:06.863 回答