Question

我正在构建基于Javascript的菜单，并且我的jQuery代码有些困难，如下所示：

// Add <img> tags
$(".menu-block-wrapper").find('li').not('.leaf').prepend('<img src="plus-sign.png"/>');

// Add clicking functionality to images
$(".menu-block-wrapper").find('li').not('.leaf > img').click(
     function(event) {
       $('ul', this).first().toggle();

       var ul = $('ul', this).first();

       if (ul.is(":hidden")) {
        $('img', this).first().attr( "src", "plus-sign.png" );
       } else {
        $('img', this).first().attr( "src", "minus-sign.png" );
       }

       event.stopPropagation();
    });

在我的测试页面（jQuery Test Page）中运行此代码，我得到了满意的结果。 （请注意，其他功能，例如为扩展菜单项提供正确的图标，由其他代码处理，因此请不要担心。）

但是，点击功能会应用于整个<li>标记。我希望点击功能仅适用于<img>标记。我缺乏对jQuery的了解似乎限制了我，因为我所尝试的一切都破坏了点击功能。

使用我的jQuery Test Page断言您建议的更改可能很方便。谢谢你的时间。

Answer 1

我想你想要：

$(".menu-block-wrapper").find('li img').not('.leaf > img').click( ...

这将定义嵌套在列表项内的图像的单击函数，这些列表项不是具有类名“leaf”的元素的立即childen

jQuery：为图像添加点击功能以打开/关闭菜单

1 个答案: