Question

我正在使用jQuery UI来创建菜单。我有一些问题。

我无法在我创建的触发器下方打开菜单。（将它附在触发器上？）
当我打开菜单时，我在选择项目时不会保持打开状态。

这是jsFiddle：http://jsfiddle.net/djlerman/N3HZt/

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery Menu</title>

  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  <script language="javascript" type="text/javascript">
    $(document).ready(function () {

      $( '#menu' ).hide();

      $( '#menu' ).menu();

      $( '#showHideMenu' ).mouseover(function() {
        $( '#menu' ).show();
      });

      $( '#showHideMenu' ).mouseout(function() {
        $( '#menu' ).delay(2000).hide(0);
      });

      $( '#menu' ).mouseover(function() {
        $( '#menu' ).show();
      });

      $( '#menu' ).mouseout(function() {
        $( '#menu' ).delay(2000).hide(0);
      });
    });
  </script>
</head>
<body >
  <table width="96%" border="1" align="center">
    <tr>
      <td align="right">
        <a href="#" ><span alt="Home" title="Home" class="ui-icon ui-icon-home" style="display:inline-block"></span></a>

        <span id="showHideMenu" alt="Settings" title="Settings" class="ui-icon ui-icon-wrench" style="display:inline-block"></span>
        <ul id="menu" style="position: absolute;z-index:9999;">
          <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Adamsville</a></li>
          <li><a href="#">Addyston</a></li>
          <li>
            <a href="#">Delphi</a>
            <ul>
              <li class="ui-state-disabled"><a href="#">Ada</a></li>
              <li><a href="#">Saarland</a></li>
              <li><a href="#">Salzburg</a></li>
           </ul>
          </li>
          <li><a href="#">Saarland</a></li>
        </ul>

        <a href="#" ><span alt="Help" title="Help" class="ui-icon ui-icon-help" style="display:inline-block"></span></a>
      </td>
    </tr>
  </table>

  <p style="border: 2px solid; height: auto; width: 96%;margin: 0 auto;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu velit varius, ornare tellus a, rutrum diam. Sed lacinia nunc in metus ultrices, iaculis euismod justo porttitor. 
  </p>

  </body>
</html>

Answer 1

我建议不要先实现悬停功能。您对任何网站的目标应始终是确保您可以在移动设备和平板电脑上实施它。请记住，触摸屏上唯一的鼠标是手指。所以尝试这样的事情：

<强> HTML：

 <header>
            <div class="container">

    <nav class="">
        <button type="button" class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </nav>        
        </header>

<强> JavaScript的：

$(function(){$(".btn-navbar").click(function(){$("nav").toggleClass("open")})});

<强> CSS：

nav.open ul {
    display: block;
  }
  nav .btn-navbar {
    margin: 9px 0 0;
    background: rgba(0, 0, 0, 0.1);
    padding-top: 14px;
    padding-bottom: 14px;
  }
  nav .btn-navbar:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  nav .btn-navbar:active {
    margin-top: 11px;
    padding-bottom: 12px;
  }
  nav .btn-navbar .icon-bar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 3px;
  }
  nav ul {
    display: none;
    position: absolute;
    right: 0;
    top: 62px;
    width: 190px;
    z-index: 1000;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.14);
  }
  nav ul li {
    float: none !important;
    margin: 0 !important;
  }
  nav ul li a {
    line-height: 1 !important;
    color: #1a85eb !important;
    display: block;
    border-bottom: 2px solid #f3f4f6;
    text-align: center;
    padding: 10px 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav ul li a.highlight {
    background: #f3f4f6 !important;
  }
  nav ul li .dropdown-toggle {
    display: none;
  }
  nav ul li .dropdown-menu {
    position: static;
    border: none;
  }
  nav ul li .dropdown-menu a {
    padding: 10px 20px;
    font-weight: bold;
  }
  nav ul li .dropdown-menu a:hover {
    background: #fff;
  }
  nav ul li .dropdown-menu li:last-child a {
    border-bottom: none;
  }
}

Answer 2

找到解决方案。很难找到，很容易实现。

在return false;的点击功能中添加#showHideMenu。添加点击文档会隐藏#menu。

我不知道为什么#showHideMenu图标和#menu本身被视为文档隐藏的一部分。

对于展示位置，我在right上使用了css #menu属性。我希望将触发器#showHideMenu与#menu联系起来，这样如果移动了触发器，那么#menu也会移动。如果我找到解决方案，我会发布一个跟进。

jsFiddle：http://jsfiddle.net/djlerman/N3HZt/7/

CSS：

.menuContent {
    right:      35px;
    position:   absolute;
    z-index:    9999;
    text-align: left;
}

.menuIcon {
    display:    inline-block;
}

JAVASCRIPT：

$(document).ready(function () {

  $('#menu').hide();

  $('#menu').menu();

  $('#showHideMenu').click(function () {
      $('#menu').toggle();
      return false;
  });

  $(document).click(function () {
      $('#menu').hide();
  });
});

HTML：

<table width="96%" border="1" align="center">
 <tr>
    <td align="right"> 
      <a href="#"><span alt="Home" title="Home" class="ui-icon ui-icon-home menuIcon" ></span></a>
      <span id="showHideMenu" alt="Settings" title="Settings" class="ui-icon ui-icon-wrench menuIcon"></span>
      <ul id="menu" class="menuContent">
            <li class="ui-state-disabled"><a href="#">Aberdeen</a>
            </li>
            <li><a href="#">Ada</a>
            </li>
            <li><a href="#">Adamsville</a>
            </li>
            <li><a href="#">Addyston</a>
            </li>
            <li> <a href="#">Delphi</a>

                <ul>
                    <li class="ui-state-disabled"><a href="#">Ada</a>
                    </li>
                    <li><a href="#">Saarland</a>
                    </li>
                    <li><a href="#">Salzburg</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Saarland</a>
            </li>
      </ul> 

      <a href="#"><span alt="Help" title="Help" class="ui-icon ui-icon-help menuIcon"></span></a>

    </td>
</tr>
</table>
<p style="border: 2px solid; height: auto; width: 96%;margin: 0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu velit varius, ornare tellus a, rutrum diam. Sed lacinia nunc in metus ultrices, iaculis euismod justo porttitor.</p>

jQuery UI菜单放置和保持菜单打开直到mouseout

2 个答案: