一个轻量级、灵活、多用途的jQuery内容显示（show/hide/toggle）插件，允许您轻松管理任何HTML元素的显示可见性。

可用于剧透、选项卡、工具提示、弹出窗口、下拉菜单、超级菜单等。

如何使用它:

1.在jquery之后加载jquery.autohide.js脚本即可开始。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.autohide.js"></script>

2.启用触发器元素来切换弹出窗口。

<span id="example">
  Click Me
  <div class="popover-content" id="popover">
    <p>Your Content Here</p>
  </div>
</span>

/* example CSS */
.popover-content {
  display: none;
  position: absolute;
  width: 300px;
  padding: 1em;
  background-color: #fff;
  border: 1px solid #666;
  z-index: 9;
}

$('#example').autohide_timeout({
  $target: $('#popover-content')
});

3.使用插件从嵌套列表中创建下拉菜单。

<ul id="example">
  <li class="has-children">
    <a href="#">Menu 1</a>
    <ul class="is-children">
      <li><a href="#">Menu 1.1</a></li>
      <li><a href="#">Menu 1.2</a></li>
      <li><a href="#">Menu 1.3</a></li>
    </ul>
  </li>
  <li class="has-children">
    <a href="#">Menu 2</a>
    <ul class="is-children">
      <li><a href="#">Menu 2.1</a></li>
      <li><a href="#">Menu 2.2</a></li>
      <li><a href="#">Menu 2.3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menu 3</a>
  </li>
</ul>

/* example CSS */
ul#example {
  padding: 0;
}
 
ul#example > li {
  position: relative;
  float: left;
  margin-right: 20px;
}
 
ul#example > li > ul {
  display: none;
  width: 160px;
  position: absolute;
  padding: 20px;
  background-color: pink;
  z-index: 3;
}
 
ul#example > li > ul.submenu-opened {
  display: block;
}

var $dropMenu = $('#example');
$dropMenu.autohide_timeout({
  $source: function( $el ) {
    return $el.find('> li > a');
  },
  $target: function( $source ) {
    return $source.next('ul.is-children');
  },
  onEvents: function( $source, $target, event ) {
    $dropMenu.find('.submenu-opened').removeClass('submenu-opened');
    $target.addClass('submenu-opened');
  },
  onTimeout: function( $source, $target, event ) {
    $dropMenu.find('.submenu-opened').removeClass('submenu-opened');
  }
});

4.自定义触发事件。默认值：“点击”。

$('#example').autohide_timeout({
  events: 'click mouseenter',
});

5.设置隐藏元素之前的等待时间。默认值：1500。

$('#example').autohide_timeout({
  timeout: 2000,
});

预览截图

简易显示/隐藏/切换插件 jQuery Autohide.js