Question

我一直在尝试使用ul li和Jquery创建一个Drop Down菜单，如Tutorial

以下是测试HTML代码：

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>OS</span>
<ul class="dropdown">
    <li><a href="http://www.ubuntu.com/"><i class="icon-envelope icon-large"></i>Ubuntu</a></li>
    <li><a href="http://www.microsoft.com/"><i class="icon-truck icon-large"></i>Microsoft</a></li>
    <li><a href="http://www.apple.com/ch/"><i class="icon-plane icon-large"></i>Apple</a></li>
</ul>

如果您点击“Apple”，它会重定向到Apple网站，并且与Microsoft重定向到Microsoft等相同。但是，如果您点击其中任何一个，它总是会将您重定向到ubuntu网站。

以下是Js fiddle上Javascript的整个代码。

请求任何帮助。

Answer 1

你的问题有点令人困惑，但我能收集的是你的元素链接到同一页面？

由于li不是默认超链接，我猜你正在使用JS / JQuery来实现这一点。在您链接的教程中，他们使用导航和锚点。

这是一个可以满足您需求的工作li菜单系统的例子。

      $(function(){ // Wait till page is loaded

        $(".menulink").click(function(){ // do something on click of one of the menu items.
            window.location.replace($(this).data("link")); //get the data link and redirect to it
        });

    });

以下是您可以使用的HTML列表。 data属性用于存储URL

    <ul>
    <li class="menulink" data-link="www.example.com">Menu1</li>
    <li class="menulink" data-link="www.example.com">Menu2</li>
    <li class="menulink" data-link="www.example.com">Menu3</li>
    </ul>

更新：

在看了你的小提琴后，我能够让它工作

http://jsfiddle.net/xyUP3/14/

我认为这个问题只是一个类型o。当您应该引用“opt”时，您正在引用“opts”这是全局li对象，“opt”是刚刚单击的本地li实例。因此，您总是被超链接到页面上的第一个li，即ubuntu链接

下拉菜单ul li jQuery

1 个答案: