-2

我一直在尝试使用 ul li 和 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 站点，并且与 Microsoft 重定向到 Microsoft 等相同。但是目前，如果您单击其中任何一个，它总是会将您重定向到 ubuntu 网站。

这是Js fiddle上带有 Javascript 的整个代码。

感谢您的帮助。

4

1 回答 1

0

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

由于 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。您引用的是全局 li 对象的“opts”，而您应该引用的是刚刚单击的本地 li 实例的“opt”。因此，您总是被超链接到页面上的第一个 li，即 ubuntu 链接

于 2013-06-03T13:29:06.820 回答