下拉菜单jQuery

Dropdown Menu ul li jQuery

本文关键字：jQuery 下拉菜单      更新时间：2023-09-26

我一直在尝试用ul和Jquery制作一个下拉菜单，就像在这个教程中

下面是测试的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网站，就像微软重定向到微软一样，等等。但是现在，如果你点击其中任何一个，它总是会将你重定向到ubuntu网站。

这是Javascript在Js上的全部代码。

谢谢你的帮助

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

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

下面是一个可以工作的菜单系统的例子，它可能适合你的需要。

      $(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/

我认为这只是一个简单的问题。你引用了"opts"，这是全局li对象，当你应该引用"opt"，这是刚刚点击的本地li实例。因此，你总是得到超链接到页面的第一个li，也就是ubuntu链接

相关文章：