A simple show-submenu-on-hover-menu. 不指定

Else , 2007/11/20 14:19 , 代码片段,演示也有 , Comments(0) , Reads(1868) , Via Original
jq显示子菜单的效果

html

<ul id="menu">
  <li class="menu">Sub 1
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
  <li class="menu">Sub 2
    <ul>
      <li>test 1</li>
      <li>test 2</li>
      <li>test 3</li>
      <li>test 4</li>
    </ul>
  </li>
</ul>

jquery


$(document).ready(function() {
  var toggle = function(direction, display) {
    return function() {
      var self = this;
      var ul = $("ul", this);
      if( ul.css("display") == display && !self["block" + direction] ) {
        self["block" + direction] = true;
        ul["slide" + direction]("slow", function() {
          self["block" + direction] = false;
        });
      }
    };
  }
  $("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
  $("li.menu ul").hide();
});

jqeury的另一个方法

$(document).ready(function() {

  $("#menu li ul").hide();

  $("#menu li").hover(
        function () {
    $(this).children("ul").show();
        },function(){
    $(this).children("ul").hide();
  });//hover

});// document ready


原文地址:http://docs.jquery.com/Cookbook/Navigation
--------------------------------------------------------------------------------------------------------
ps:如果中文的js弄懂的差不多了,我建议你去看一下英文的,即使没有弄,也可以学几个单词!
Add a comment

Nickname

Site URI

Email

Enable HTML Enable UBB Enable Emots Hidden Remember [Login] [Register]