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フィドル

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

これが、同様のソリューションを探している人に役立つことを願っています。ありがとうございました。

于 2012-10-29T17:18:24.017 に答える