Question

我需要一些帮助在jQuery中创建一个导航栏，如果你看看JS小提琴，你应该明白我想要得到什么效果。当你按下一个dublink时，我已经做了我想要做的事情（当点击子链接时我不希望它向上滑动）

为任何帮助干杯

Answer 1

首先，您只想将click事件绑定到第一行子节点，在此指定将其绑定到根ul中存在的所有li元素。

其次，您可能希望将click事件绑定到a元素，因为单击li元素的第一行（您希望将click事件绑定到的位置）中存在的任何子元素都将触发完全相同的点击事件。这是因为您确实通过其中一个孩子点击了li。

让我们看看这段重新编写的代码是否可以帮助您入门：

http://jsfiddle.net/Ay6Xs/10/

（我也进行了一些HTML重写，所以应用了一些复制意大利面）

这是来自jsfiddle的代码：

$(document).ready(function()
{
    // hides all admin control elements (drop down)
    $("#navigation_bar ul").hide();

    // Only bind click handler to direct li > a children
    $("#navigation_bar > li > a").click(function(e)
    {
        // Slide up every single ul
        $("#navigation_bar ul").slideUp();

        $(this).siblings()
            .stop()
            .slideToggle();

     });
});

HTML：

<ul id="navigation_bar">
    <li>
        <a id="database" href="javascript:void(0)">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/homeico.png"/>
            Dashboard
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
    <li>
        <a id="database" href="#">
            <img class="icon" src="images/icon/mailico.png"/>
            Messages
        </a>
        <ul>
            <li>
                <a href="#">> Inbox</a>
            </li>
            <li>
                <a href="#">> Sent</a>
            </li>
            <li>
                <a href="#">> Search</a>
            </li>
        </ul>
    </li>
</ul>

jQuery列表导航

1 个答案: