Question

我在这里阅读了很多关于将bootstrap菜单下拉菜单改为onhover action vs onclick的线程。

我对此感兴趣并且我尝试过的大部分内容似乎都有效，但是，我已经失去了点击菜单中父链接的功能。此外，当我点击父链接（尝试访问该页面）时，下拉菜单保持打开状态。

我使用了以下CSS：

@media only screen and (min-width : 768px) {
  /* Make Navigation Toggle on Desktop Hover */
  .dropdown:hover .dropdown-menu {
      display: block;
  }
}
@media (max-width: 1024px) {
   .navbar-header {
       float: none;
   }
   .navbar-toggle {
       display: block;
   }
   .navbar-collapse {
       border-top: 1px solid transparent;
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }
   .navbar-collapse.collapse {
       display: none!important;
   }
   .navbar-nav {
       float: none!important;
       margin: 7.5px -15px;
   }
   .navbar-nav>li {
       float: none;
   }
   .navbar-nav>li>a {
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .navbar-collapse.collapse.in { 
       display: block!important;
   }
   .collapsing {
       overflow: hidden!important;
   }
}

我还发现了以下脚本，它应该使父导航链接可以点击：

$('.dropdown-toggle').click(function() {
         var location = $(this).attr('href');
         window.location.href = location;
         return false;
});

这是我在这里找到的各种线程/来源拼凑而成的。一切正常，但父链接没有点击进入页面，当点击父链接时，下拉菜单保持打开状态。

有没有人知道如何使这项工作？

以下是HTML导航：

<div class="collapse navbar-collapse ">
    <ul id="top-nav" class="nav navbar-nav"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/" class="external">Home</a></li>
    <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/about-us/" class="external">Who We Are</a></li>
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/our-services/" class="external">Services</a></li>
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children dropdown"><a href="http://saiinfocomm.borellidesigns.com/practices/" class="external">Practices</a>
        <ul class="sub-menu dropdown-menu">
            <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/information-technology/" class="external">Information Technology</a></li>
            <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/telecommunications/" class="external">Telecommunications</a></li>
            <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/electronics-industry/" class="external">Electronics Industry</a></li>
            <li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-144 current_page_item active "><a href="http://saiinfocomm.borellidesigns.com/verticals/" class="external">Verticals</a></li>
        </ul>
    </li>
    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://saiinfocomm.borellidesigns.com/contact-us/" class="external">Contact Us</a></li>
    <li id="menu-item-39" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.strategicanalysis.com" class="external">SAI Corporate</a></li>
    </ul>                       
</div>

Answer 1

添加属性＆＃34;已停用＆＃34;到父列表项的锚标记：

<a class="dropdown-toggle disabled" href="http://saiinfocomm.borellidesigns.com/practices/">Practices<b class="caret"></b></a>

将Bootstrap Nav菜单更改为悬停并保留父链接

1 个答案: