Question

我尝试使用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>

Answer 1

使用后代选择器时，不能将id选择器用于第一个元素。像下面的CSS不起作用。

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

Answer 2

检查此新链接https://jsfiddle.net/rxLg0bo4/9/

  $('.menu_link').hover(function () {
        $("#pnlSubmenu").slideDown('slow');
    });
    $('#pnlSubmenu').on("mouseenter", function () {
        $(this).show();
    });
    $('#pnlSubmenu').mouseleave(function () {
        $(this).hide();
    });
    $('.menu_link').mouseleave(function () {
        $("#pnlSubmenu").hide();
    });

Answer 3

首先，我必须提到你可以使用引导下拉菜单，它会让你的生活变得更轻松，第二次我想出了一些你可以做出的改变，它并不完美，但它会让你到达那里：

HTML

<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="link1 menu_link" href="Index.aspx?category=1">menu1</a><a class="menu_link" href="Index.aspx?category=2">menu2</a><a class="link3 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 id="link1" class="submenu_panel" style="height:0px">   <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 id="link3" class="submenu_panel" style="height:0px"> <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>

你可以在这里看到我将类link1和link3添加到两个菜单链接，你应该填写剩下的部分，并为下拉部分添加与id相同的值，然后在鼠标悬停事件上我将读取此值并调用要显示的相应ID。至于为什么菜单没有消失，你需要一个mouseout事件，如下所示：

$("#pnlMenu").mouseover(function (event) {
    var x = $(event.target).attr('class').split(' ')[0];
    console.log(x)
    $("#"+x).css("height", "100px");
    $("#pnlSubmenu").slideToggle('fast');
  });


  $("#pnlMenu").mouseout(function (event) {
    var x = $(event.target).attr('class').split(' ')[0];
    console.log(x)
    $("#"+x).css("height", "0px");
    $("#pnlSubmenu").slideToggle('fast');
  });

像我说的那样，这是一个让你前进的草案，这不是一个完美的解决方案。我希望这有帮助

Answer 4

简单的Jquery可以做到这一点

function showE() {

  $("#h1").removeClass("hide");

}

function don() {
  if ($('#h1').is(':hover')) {

    $("#h1").removeClass("hide");

  } else {
    $("#h1").addClass("hide");
  }

}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="h" href="#" onmouseover="showE()" onmouseout="don()">show</a>
<div id="c" onmouseover="showE();" onmouseout="javascript:$('#h1').addClass('hide');">

  <div id="h1" style="float: inherit; overflow: hidden; position: absolute;height:15px;
                        background-color: Gray; border-radius: 0 5px 5px 5px;" class="hide">

    Enter your email if you have posted this ad

  </div>
</div>

下拉菜单不适用于JavaScript

4 个答案:

HTML