Question

我创建了一个带有以下HTML的jquery下拉菜单：

<dl class="dropdown">
               <dt><a id="linkglobal1"><span class="icon lock">Action</span></a></dt>
                <dd>
                    <ul id="ulglobal1">
                        <li><a href="#"><span>Everyone</span></a></li>
                        <li><a href="#"><span>Friends</span></a></li>
                        <li><a href="#"><span>Only Me</span></a></li>
                        <li><a href="#"><span>Customize</span></a></li>
                  </ul>
               </dd>
            </dl>

然后是JS：

$(document).ready(function()
{
    $('dl.dropdown dt a').click(function()
    {
        $("dl.dropdown dt a").removeClass("selected");
        var toggleId = "#" + this.id.replace(/^link/,"ul");
        $('dl.dropdown dd ul').not(toggleId).hide();
        $(toggleId).toggle();
        if($(toggleId).css("display") == "none")
        {
            $(this).removeClass("selected");
        }
        else
        {
            $(this).addClass("selected");
        }
    });
    $("dl.dropdown dd ul li a").click(function()
    {
        $("dl.dropdown dd ul").hide();
        $("dl.dropdown dt a").removeClass("selected");
    });
    $(document).bind('click', function(e)
    {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
        {
            $("dl.dropdown dd ul").hide();
            $("dl.dropdown dt a").removeClass("selected");
        }
    });
});

我遇到的问题是它依赖于在<dt>链接和<ul>上使用ID。如何修改我的jQuery以便它不再依赖它们？

由于

编辑：我自己也回答了这个问题。见下文。

Answer 1

做到了这一点：

$(document).ready(function()
{
    $('dl.dropdown dt a').click(function()
    {
        $("dl.dropdown dt a").removeClass("selected");

        var toggleMenu = $(this).parent().parent().find('dd ul');

        $(toggleMenu).toggle();

        $('dl.dropdown dd ul').not(toggleMenu).hide();

        if(toggleMenu.css("display") == "none")
        {
            $(this).removeClass("selected");
        }
        else
        {
            $(this).addClass("selected");
        }
    });
    $("dl.dropdown dd ul li a").click(function()
    {
        $("dl.dropdown dd ul").hide();
        $("dl.dropdown dt a").removeClass("selected");
    });
    $(document).bind('click', function(e)
    {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
        {
            $("dl.dropdown dd ul").hide();
            $("dl.dropdown dt a").removeClass("selected");
        }
    });
});

Answer 2

给那些项目课程。这些课程不需要存在。

                <ul id="ulglobal1" class="dropdown">
                    <li><a href="#"><span>Everyone</span></a></li>
                    <li><a href="#"><span>Friends</span></a></li>
                    <li><a href="#"><span>Only Me</span></a></li>
                    <li><a href="#"><span>Customize</span></a></li>
              </ul>

然后你的jquery选择器使用

$(".dropdown")....

Answer 3

您可以使用jbar jQuery插件 jbar是一个jQuery插件，可以将无序列表转换为带有下拉菜单的工具栏。请点击以下链接： - jbar@GitHub

jQuery下拉菜单

3 个答案: