Question

悬停意图脚本不在基于div的菜单上工作。请在下面找到代码。如果我在<ul>和<li>中添加div，则悬停效果不起作用它正在处理no div菜单，但不适用于div菜单只需复制并粘贴下面的代码并检入浏览器：

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/2013.03.11/hoverintent.min.js">
</script>
<style>
  /* menu on hover - with animation */
  .dropdown.drop-collapsed .dropdown-menu {
    height: 0 !important;
    z-index: -1;
  }
  .dropdown .dropdown-menu {
    overflow: hidden;
    -webkit-transition: height 0.65s ease;
    transition: height 0.65s ease;
  }
  .navbar-nav > li > .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .navbar-nav > li.open .dropdown-menu {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
  }


  .navbar-nav > li.open .drop1. .container1 .dropdown-menu {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
  }

</style>    

<script>     
    jQuery(document).ready(function () {
      "use strict";           
      var $ = jQuery.noConflict();

      function showMenu() {
        $(this).removeClass("drop-collapsed");
        $(this).addClass("open");
      }
      function hideMenu(){
        $(this).removeClass("open");
        var $dropdown = $(".dropdown");
        //var $dropdown= $(".li.has-childern")

        $dropdown.each(function () {
          $(this).addClass("drop-collapsed");
        }
       );
      }          

      var $dropdown = $(".dropdown");
      //var $dropdown= $(".li.has-childern");

      $dropdown.each(function () {
        var $this = $(this);
        var $dropmenu = $this.find(".dropdown-menu");
        $dropmenu.css("height", $dropmenu.outerHeight());

        $this.addClass("drop-collapsed");
      }
     );


      // dropdown menu hover intent
      var hovsettings = {
        timeout:0,
        interval: 0,
        over: showMenu,
        out: hideMenu
      }
      ;


      $(".dropdown").hoverIntent(hovsettings);
    }
    );

</script>
<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">        

    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown 
          <b class="caret">
          </b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Action
            </a>
          </li>
          <li>
            <a href="#">
              Another action
            </a>
          </li>
          <li>
            <a href="#">
              Something else here
            </a>
          </li>
          <li class="divider">
          </li>
          <li class="dropdown-header">
            Nav header
          </li>
          <li>
            <a href="#">
              Separated link
            </a>
          </li>
          <li>
            <a href="#">
              One more separated link
            </a>
          </li>
        </ul>
      </li>
    </ul>


    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle1"  >
          Dropdown 
          <b class="caret">
          </b>
        </a>

        <div  class="drop1 dropdown-menu">
          <div class="container1 dropdown-menu">
            <ul class="dropdown-menu ">
              <li>
                <a href="#">
                  Menu 2
                </a>
              </li>
              <li>
                <a href="#">
                  Sub Menu 
                  <span>
                    1
                  </span>
                </a>
                <ul  >
                  <li>
                    <a href="#">
                      Menu 2
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Menu 3
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Menu 4
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Menu 5
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Menu 6
                    </a>
                  </li>
                </ul>
              </li>                  
        </ul>
      </div>
    </div>`

Answer 1

看看这个Link。

 jQuery(document).ready(function () {
      "use strict";           
      var $ = jQuery.noConflict();

      function showMenu() {
        $(this).removeClass("drop-collapsed");
        $(this).addClass("open");
      }
      function hideMenu(){
        $(this).removeClass("open");
        var $dropdown = $(".dropdown");
        //var $dropdown= $(".li.has-childern")

        $dropdown.each(function () {
          $(this).addClass("drop-collapsed");
        }
       );
      }          

      var $dropdown = $(".dropdown");
      //var $dropdown= $(".li.has-childern");

      $dropdown.each(function () {
        var $this = $(this);
        var $dropmenu = $this.find(".dropdown-menu");
        $dropmenu.css("height", $dropmenu.outerHeight());

        $this.addClass("drop-collapsed");
      }
     );


      // dropdown menu hover intent
      var hovsettings = {
        timeout:0,
        interval: 0,
        over: showMenu,
        out: hideMenu
      }
      ;


      $(".dropdown").hoverIntent(hovsettings);
    }
    );

我只为顶级div容器设置了dropdown-menu类。你需要修改样式才能看起来很好。

悬停意图javascript无法在div结构菜单上工作

1 个答案: