0

我想preventDefault在父元素上使用，但我不希望它影响子元素。这可以做到吗？

我设置了一个 JsFiddle 来帮助说明我的意思：http: //jsfiddle.net/StephenMeehan/FdwST/5/

我一直在为这个问题挠头几个小时，无法弄清楚......

HTML：

<ul id="SidebarNav">
<li><a href="#">Toys &amp; Games</a></li>
<li><a href="#">Audio Visual</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Photography</a></li>
<li><a href="http://www.google.com">Furniture (Hover over this)</a>
<ul>
<li><a href="http://www.bbc.co.uk">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</li>
<li><a href="#">Music</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="http://www.google.com">Furniture (Hover over this)</a>
<ul>
<li><a href="http://www.bbc.co.uk">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>

JavaScript：

// This is my first attempt at writing something useful in jQuery.
$(document).ready(function() {

    $("#SidebarNav ul").hide();

    $("li:has(ul)").addClass("SubMenu");


    // preventDefault removes default events on #SidebarNav a and it's children. 
    //Is there a way to only target list items with a class of .SubMenu?
    // I want to use preventDefault only on .SubMenu a, and still be able to use the links in the drop down menu.
    $(".SubMenu a").click(function(e) {
        e.preventDefault();
    });


    // This works, but it sometimes gets confused if there's more than one drop down and the mouse is moved around too fast. Is there a way to force collapse all other SubMenu items on rollover?
    $(".SubMenu").on("hover", function() {
        $(this).children("ul").delay(100).slideToggle("fast").stop();
    });

});​
4

3 回答 3

1

在我能理解之后，您只需在选择器中添加一个:first以.SubMenu a选择第一个a以防止默认行为。

所以使用：$(".SubMenu a:first").click ....

查看选择器上的jQuery 文档:first

编辑：为您准备的 JS Fiddle

于 2012-10-29T13:08:49.870 回答
0

>允许您选择元素的直接子元素，玩这些应该可以。

所以在你的情况下如何：

$(".SubMenu > a").click(function(e) {
    e.preventDefault();
});

有关 jquery 直接后代选择器的更多信息，请参阅：api.jquery.com/child-selector

于 2012-10-29T13:08:13.567 回答
0

感谢 ThoKra 回答问题。我最终得到了这个工作。这将在 .SubMenu 的所有类中找到所有第一个 a 标签。

$(".SubMenu").find("a:first").click(function(e) {
e.preventDefault();
});

下面的 JQuery 只会在 .SubMenu 的第一个实例中找到第一个 a 标签，我的页面有多个 .SubMenu 实例，所以不太正确。

$(".SubMenu a:first").click(function(e) {
e.preventDefault();
});

希望这可以帮助任何寻找类似解决方案的人。再次感谢 ThoKra。

于 2012-10-29T17:18:24.017 回答