1

这是我在这里的第一篇文章，所以我提前为任何不良做法道歉。我一直在寻找一段时间，但还没有找到适合我需求的解决方案 - 也许我只是做错了。但这里有：

我正在使用 Big Cartel CMS 构建一个站点，并且第一次深入研究了 jQuery。我正在尝试创建一个水平且居中的导航菜单，该菜单将在适当的情况下在下方显示一个子菜单。我对 html 和 CSS 很好，但在 jQuery 上苦苦挣扎。

加价如下：

<nav>
    <ul id="mainNav">
        <li><a href="expand-the-sub-menu">Option 1</a>
            <ul id="option1Nav">
                <li><a href="somewhere">Option 1 Link 1</a></li>
                <li><a href="somewhere">Option 1 Link 2</a></li>
                <li><a href="somewhere">Option 1 Link 3</a></li>
                <li><a href="somewhere">Option 1 Link 4</a></li>
                <li><a href="somewhere">Option 1 Link 5</a></li>
            </ul>
        </li>
        <li><a href="expand-the-sub-menu">Option 2</a>
            <ul id="option2Nav">
                <li><a href="somewhere">Option 2 Link 1</a></li>
                <li><a href="somewhere">Option 2 Link 2</a></li>
                <li><a href="somewhere">Option 2 Link 3</a></li>
                <li><a href="somewhere">Option 2 Link 4</a></li>
                <li><a href="somewhere">Option 2 Link 5</a></li>
            </ul>
        </li>
        <li><a href="somewhere">Option 3</a></li>
        <li><a href="somewhere">Option 4</a></li>
        <li><a href="somewhere">Option 5</a></li>
        <li><a href="somewhere">Option 6</a></li>
    </ul>
</nav>

虽然这种格式不会改变，但带有子菜单的选项数量可能会（客户可以随意更改）。到目前为止我的 jQuery：

$('#mainNav ul').hide();
$('#mainNav li a').click(function(){
    $('#mainNav li:has("ul")').each(
        function(){
            $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){
            //Do magic stuff here - i.e. display the correct sub-menu.
            });
        }
    );
});

目前，当点击时，这针对所有选项（我无法理解为什么），我仍然没有深入了解如何只显示适当的子菜单。可以将类添加到任何 html 元素中，如果这有助于使事情变得更容易的话。

提前致谢！

4

1 回答 1

1

这个怎么样：

http://jsfiddle.net/qDX2q/3/

$('#mainNav ul').hide();
$('#mainNav a')
    .click(function()
           {
                $('#mainNav ul').hide();
                $(this).siblings("ul").show();
                return false;
           });
​

我认为你缺少的东西是：

  • 确保从 click 事件中返回 false，以便不遵循错误的 url。
  • this关键字。在上面的代码this中实际上是你所在的锚标记。所以你可以只寻找兄弟姐妹ul并展示他们
于 2012-08-15T14:15:14.900 回答