2

http://jsfiddle.net/xfPxp/

基本上试图创建一个多层向下滑动单击菜单，我已经将子菜单设置为向下滑动，但是当我单击子项时，我无法弄清楚如何阻止父级滑动。谢谢你的帮助！

html代码------------------------------------------------ ----------------------

<!--Nav Menu 1-->

<ul class="make">Club Car
    <ul class="model" style="display: none">Precedent
        <ul class="product" style="display: none">Brush Guard</ul>
        <ul class="product" style="display: none">Lift Kits</ul>
    </ul>

    <ul class="model" style="display: none">DS
        <ul class="product" style="display: none">Brush Guard</ul>
        <ul class="product" style="display: none">Lift Kits</ul>
    </ul>
</ul>

<!--- Nav Menu 2-->

<ul class="make">E-Z-Go
    <ul class="model" style="display: none">TXT
        <ul class="product" style="display:none">Brush Guard</ul>
        <ul class="product" style="display:none">Lift Kits</ul>
    </ul>

    <ul class="model" style="display: none">RXV
        <ul class="product" style="display:none">Brush Guard</ul>
        <ul class="product" style="display:none">Lift Kits</ul>
    </ul>

Jquery 脚本------------------------------------------------ --

<script>
$("ul.make").click(function () {
        if ($(this).children('ul').is(":hidden")) {
            $(this).children('ul').slideDown("fast");
        }
        else {
            $(this).children('ul').slideUp("fast");
        }
});
$("ul.model").click(function () {
    if ($(this).children('ul').is(":hidden")) {
        $(this).children('ul').slideDown("fast");
    }
    else {
        $(this).children('ul').slideUp("fast");
    }
});
</script>
4

2 回答 2

3

使用你.stopPropagation传递event给你的函数：

$("ul.make").click(function (event) {
    event.stopPropagation();
    if ($(this).children('ul').is(":hidden")) {
        $(this).children('ul').slideDown("fast");
    } else {
        $(this).children('ul').slideUp("fast");
    }
});

$("ul.model").click(function (event) {
    event.stopPropagation();
    if ($(this).children('ul').is(":hidden")) {
        $(this).children('ul').slideDown("fast");
    } else {
        $(this).children('ul').slideUp("fast");
    }
});

演示：http: //jsfiddle.net/xfPxp/1/

于 2013-07-08T14:31:38.400 回答
0

您只需将 event.stopPropagation 添加到您的函数中。

http://jsfiddle.net/9hQz8/

您的点击事件正在冒泡到另一个功能。

$("ul.make").click(function (event) {
    alert("make " + this.tagName + " " + this.className);
            if ($(this).children('ul').is(":hidden")) {
                $(this).children('ul').slideDown("fast");
            }
            else {
                $(this).children('ul').slideUp("fast");
            }
    event.stopPropagation();
});
$("ul.model").click(function (event) {
    alert("make " + this.tagName + " " + this.className);
        if ($(this).children('ul').is(":hidden")) {
            $(this).children('ul').slideDown("fast");
        }
        else {
            $(this).children('ul').slideUp("fast");
        }
    event.stopPropagation();
});
于 2013-07-08T14:38:46.120 回答