个人中心
gpt4 book ai didi

javascript - 下拉菜单不适用于 JavaScript

转载 作者：行者123 更新时间：2023-11-28 07:21:57 25 4
gpt4 key购买 nike

我试图用 JavaScript 制作一个下拉菜单，因为生成了 html。所以我得到了一些用户的帮助，但它还不能正常工作。
这是我现在的菜单:https://jsfiddle.net/rxLg0bo4/5/
正如您在 jsFiddle 中看到的那样，当我离开该区域时，菜单不会消失。当我从 menu1 转到 menu2 时，它也应该改变。
如您所见，我确实没有用于构建下拉菜单的智能结构，但它应该也能正常工作。我正在使用 ASP.NET，因此生成了这段代码。

    <div id="wrapper_menu">
    <div id="menuicon">
        <div class="menubar" id="menubar-top"></div>
        <div class="menubar" id="menubar-mid"></div>
        <div class="menubar" id="menubar-bottom"></div>
    </div>
    <nav id="menu">
        <div id="pnlMenu">  <a class="menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="menu_link active_menu_link" href="Index.aspx?category=4">menu3</a><a class="menu_link" href="Index.aspx?category=5">menu4</a><a class="menu_link" href="Index.aspx?category=6">menu5</a><a class="menu_link last_menu_link" href="Index.aspx?category=8">menu6</a>

        </div>
        <div id="pnlSubmenu" style="display:none">
            <div class="submenu_panel" style="height:100px">    <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>

            </div>
            <div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
 <a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>

            </div>
        </div>
    </nav>
</div>

这是我现在拥有的 JavaScript:

 $("#pnlMenu .menu_link").mouseover(function () {
                        $(".submenu_panel").css("height", "100px");
                        $("#pnlSubmenu").slideToggle('fast');
                    });

这是我的 aspx 代码，如您所见，我已经向其中添加了 jquery:

 <head runat="server">
    <title> 2.0 Preview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Styles/font-awesome-4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="Styles/StyleSheet.css" />
    <link rel="shortcut icon" href="Images/favicon.png" type="image/x-icon" />
    <!-- Scripts -->
    <script src="/Scripts/auto-rotate.js"></script>
    <script src="/Scripts/jquery.min.js"></script>
    <script src="/Scripts/key-nav.js"></script>
   <script type="text/javascript" src="/scripts/jquery.min.js"></script>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <header>
            <nav>
                <asp:HyperLink ID="lnkLogin" NavigateUrl="~/Pages/Account/Login.aspx" runat="server">Login</asp:HyperLink>
                <asp:LinkButton ID="lnkLogout" runat="server" OnClick="lnkLogout_Click">Logout</asp:LinkButton>
            </nav>
            <nav>
                <asp:Label ID="litStatus" runat="server" Text=""></asp:Label>
            </nav>
        </header>
        <div id="wrapper_secondary">
            <div id="wrapper_logo">
                <a href="/Index.aspx">
                    <div id="logo"></div>
                </a>
            </div>
            <div id="wrapper_headermenu">
                <a href="/Pages/Management/Management.aspx" id="management_link">Management</a>
                <asp:HyperLink ID="lnkRegister" NavigateUrl="~/Pages/Account/Register.aspx" CssClass="header_hyperlink" runat="server">Register</asp:HyperLink>
                <a href="#" id="contact_link">Kontakt</a>
                <a href="#">
                    <label>
                        Fullscreen
                    <asp:CheckBox id="fullscreen_chbx" OnCheckedChanged="fullscreen_chbx_Click" runat="server" AutoPostBack="true"/></label>
                </a>
            </div>
        </div>
        <div id="wrapper_menu">
            <div id="menuicon">
                <div class="menubar" id="menubar-top"></div>
                <div class="menubar" id="menubar-mid"></div>
                <div class="menubar" id="menubar-bottom"></div>
            </div>
            <nav id="menu">
 <script type="text/javascript">


    $('.menu_link').hover(function () {
        $("#pnlSubmenu").slideDown('slow');
    });
    $('#pnlSubmenu').on("mouseenter", function () {
        $(this).show();
    });
    $('#pnlSubmenu').mouseleave(function () {
        $(this).hide();
    });
    $('.menu_link').mouseleave(function () {
        $("#pnlSubmenu").hide();
    });
                </script>
                <asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
                <asp:Panel ID="pnlSubmenu" runat="server">

                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                    </asp:ContentPlaceHolder>


                </asp:Panel>
            </nav>
        </div>

最佳答案

当使用descendant选择器时，不能对第一个元素使用id选择器。像下面这样的 css 将不起作用。

 #pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
    height:50px;
    display:block;
}

关于javascript - 下拉菜单不适用于 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32044385/

25 4 0
文章推荐： javascript 和 css 过渡属性不适用于 firefox
文章推荐： c++ - 将命令行参数分配给函数
文章推荐： ios - 如何使用 SWIFT 4 创建 HMAC MD5 十六进制签名？
文章推荐： c# - 在 IE8 中，chrome 下拉列表的宽度与下拉框的宽度相同，而在 IE9 中，下拉列表的宽度不同。如何修复？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com