onClick/Javascript导航不起作用

Navigation with onClick / Javascript not working

本文关键字：不起作用 导航 Javascript onClick      更新时间：2024-03-11

我为我的网站创建了一个菜单，你可以在这里找到：

http://jsfiddle.net/nq9Nt/9/

当单击菜单上的某个类别时，它会在我的主导航上打开该类别吗？

是有什么冲突，还是我把Javascript放错了地方？

所以我希望能够点击一个类别并显示子类别，但这是行不通的。还有没有一种方法可以在您更改页面后保持打开您单击的类别？

谢谢

<ul class="nav">
<li><a href="#">Category 1</a>
</li>
<li class="drop"><a href="#">Category 2</a>
    <ul id="sub1">
        <li><a href="#">Item</a>
        </li>
        <li><a href="#">Item</a>
        </li>
    </ul>
</li>
<li class="drop"><a href="#">Category 3</a>
    <ul id="sub1">
        <li><a href="#">Sticker</a>
        </li>
        <li><a href="#">Sticker</a>
        </li>
    </ul>
</li>
<li><a href="#">Category 4</a>
    <ul id="sub1">
        <li><a href="#"> Mural</a>
        </li>
        <li><a href="#">Mural</a>
        </li>
    </ul>
</li>


         $(".drop")
         .on('click', function () {
         $(this).find('ul').toggle();
          })

实际上，至少在jsfriddle上动画是有效的，如果您将锚的href从'#'替换为真实的url，您将被重定向到另一个页面，因此首先确保您已将jquery库附加在文档的头部（因为您在脚本中使用了它），然后将脚本移动到页面底部，正好在标记'body'关闭之前。

关于在刷新后保持打开的类别的状态-通常是在服务器端通过将类（例如"active"）添加到当前链接来生成模板，然后使用css将相应的类别（或类别的层次结构）设置为打开（例如li.active ul｛display:block；｝）。好吧，实际上你可以做同样的技巧-使用js在window.location.pathname值的帮助下找到当前url，并将其与导航链接的href值匹配，然后将类"active"分配给找到的元素（或其父元素，由你的css决定）

您可以将类drop添加到第四类别中的li，这样它就可以像其他类一样工作。如果你不打算使用onclick，请删除它。

http://jsfiddle.net/nq9Nt/10/

这里的例子，

jsbin

你已经给anchor href和#，所以它会重新加载页面。你也给出了onclick方法，但它没有。

相关文章：