Question

我设法创建了一个导航栏，突出显示它何时悬停，但我无法设法将其作为悬停下拉列表。有没有办法让这成为可能？这是我正在使用的当前代码。

 <ul class="nav nav-pills nav-justified">
    <li class="auto-style1"><a runat="server" href="~/" class="auto-style2"><strong><span class="auto-style3"Home Page</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/About" class="auto-style2"><strong><span class="auto-style3"Painting</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/Contact" class="auto-style2"><strong><span class="auto-style3"Drawing</span/strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/" class="auto-style2"><strong><span class="auto-style3"Surfaces</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/About" class="auto-style2"><strong><span class="auto-style3"Easels</span></strong></a></li>
    <li class="auto-style1"><a runat="server" href="~/Contact" class="auto-style2"><strong<span class="auto-style3"Display</span></strong></a></li>
</ul>

最后，这是我运行产品后的屏幕截图。

https://gyazo.com/6da0b7c3d170000167003bf0157e64f7

Answer 1

修改要进一步详细说明下面的内容，并且由于我们在此处讨论网络表单，您应该打开Site.Master页面。

在Site.Master页面中： 如果您保留了Visual Studio内置的默认代码，则应在<Scripts></Scripts>标记之间看到以下行：

<asp:ScriptReference Name="MsAjaxBundle" /> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="bootstrap" /> <asp:ScriptReference Name="respond" /> <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> <asp:ScriptReference Name="WebFormsBundle" />

这告诉我们jQuery和Bootstrap正被导入到页面中。 JQuery是一个JavaScript库，使事情变得更容易。 Bootstrap是一个CSS库，通过向给定元素添加几个类，可以很容易地使事情看起来很好。

默认情况下，您也会在此处看到：

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" runat="server" href="~/">Application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a runat="server" href="~/">Home</a></li> <li><a runat="server" href="~/About">About</a></li> <li><a runat="server" href="~/Contact">Contact</a></li> </ul> </div> </div> </div>

这应该看起来很熟悉，因为它类似于原始帖子中的标记。要添加下拉列表，请比较下面包含下拉列表的代码，并将所需部分插入上面的代码中。像这样：

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" runat="server" href="~/">Application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a runat="server" href="~/">Home</a></li> <li><a runat="server" href="~/About">About</a></li> <li><a runat="server" href="~/Contact">Contact</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a runat="server" href="#">Page 1-1</a></li> <li><a runat="server" href="#">Page 1-2</a></li> <li><a runat="server" href="#">Page 1-3</a></li> </ul> </li> </ul> </div> </div> </div>

当您点击内容时，应让您的导航栏和下拉列表正常工作。

放置jQuery的位置： 因此，任何类型的外部脚本（尤其是大型脚本）的最佳实践是最后加载它们，这样页面就不必等待它们加载足够的内容以使用户满意。 ASP.NET MVC在这方面做得比Webforms好得多，但我们仍然可以尝试正确地做事。

再次在Site.Master页面上，一直到底部。你正在寻找关闭'＆＃39;标签。就在它之前，你需要把它放在：

<script> $(document).ready(function () { $(".dropdown").hover(function () { //toggle the open class (on/off) $(this).toggleClass("open"); }); }) </script>

所以最终结果看起来像......：

... ... ... ... ... ... <div class="container body-content"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> <hr /> <footer> <p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p> </footer> </div> </form> <script> //this line means we won't do anything until the page is ready for it $(document).ready(function () { $(".dropdown").hover(function () { //toggle the open class (on/off) $(this).toggleClass("open"); }); }) </script> </body> </html>

编辑前：

注意：我假设你使用的是bootstrap和jQuery，因为它是用asp.net标记的，你原来的类名似乎也是bootstrap语法。

这是使用bootstrap和jQuery实现此目的的一种快速简便的方法：

jsfiddle： https://jsfiddle.net/tzv3t12c/9/

Bootstrap Nav模板：

<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li>  <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> </ul> </div> </nav>

必需的jQuery：

//find elements with the dropdown class and attach the hover event to it $(".dropdown").hover(function(){ //toggle the open class (on/off) $(this).toggleClass("open"); });

<强>解释

基本上，我在这里所做的就是模拟在单击下拉链接时bootstrap执行的单击操作。如果您通过按F12在Chrome（或其他浏览器）中使用开发者工具，则可以在与页面进行交互时观看HTML。您会注意到，当点击li类dropdown时，会向其添加开放类。还有一些其他元素也会被更改，您可能也希望模拟这些修改，因为将dropdown li上的类更改为dropdown open不会，即使它已激活转型。

如何创建一个悬停下拉菜单导航栏asp.net

1 个答案: