Question

全新的jquery。我正在尝试创建一个下拉动画菜单，该菜单打开刚好足以显示子菜单同时删除菜单项。例如：

Item1
Item2
Item3

当你将鼠标移到Item2上时，你会得到

Item1
Item2
  Subitem1
  Subitem2
Item3

我知道我的代码需要更多的工作（我正在玩/现在正在尝试）而我的问题是当尝试使用变量时菜单根本没有打开所以问题是高度的某个地方：变量线。

$(document).ready(function(){

  //When mouse rolls over
  $("li").mouseover(function(){
    $(this).stop().animate({height: $('ul > li').length * 20})
  });

//When mouse is removed
$("li").mouseout(function(){
    $(this).stop().animate({height:'18px'})
});
});

我实际上更喜欢制作单独的变量行，例如

$(document).ready(function(){
var numitems = $('ul > li').length;
var totalheight = numitems * 20;
  //When mouse rolls over
  $("li").mouseover(function(){
  $(this).stop().animate({height: totalheight})
  });

  //When mouse is removed
  $("li").mouseout(function(){
  $(this).stop().animate({height:'18px'})
  });
});

Answer 1

试试这个：

$(document).ready(function(){
var numitems = $('ul > li').length;
var totalheight = (numitems * 20)+'px';
  //When mouse rolls over
  $("li").mouseover(function(){
  $(this).stop().animate({height: totalheight},500); //don't forget to give the animation some duration
  });

  //When mouse is removed
  $("li").mouseout(function(){
  $(this).stop().animate({height:'18px'},500);
  });
});

Answer 2

忘记尝试存储元素的高度并乘以。如果你将来这样做，你将遇到严重的问题。

您始终可以使用jQuery的outerHeight（）属性获取元素的高度。但是如果你想在鼠标输入/输出时发生这种情况，那么jQuery的.hover（）函数会更整洁，并执行以下操作：

var speed = 500;
$("li.top").hover(function () {
    var ul = $(this).find("ul");
    $(ul).stop(); // stop any current animation

    // tidy up attributes that have been added
    $(ul).removeClass("flattened");
    $(ul).css("height", ""); // very necessary;
    $(ul).css("display", ""); // very necessary;
    $(ul).removeClass("show");

     var _height = $(ul).outerHeight();
    $(ul).addClass("flattened");
    $(ul).addClass("show");
    $(ul).show();

    $(ul).animate({ height: _height }, speed , function () {
        $(ul).removeClass("flattened");
    });

}, function () {
    var ul = $(this).find("ul");
    $(ul).stop();

    $(ul).animate({ height: "0px" }, speed , function () {
        $(ul).hide();
        $(ul).css("height", ""); // very necessary;
        $(ul).css("display", ""); // very necessary;
        $(ul).removeClass("show");                
    });
});

我使用以下CSS在我的测试文件中使用：

ul li a { float: left; width: 100%; }
ul li > ul { display: none;float:left;  }
ul li { float: left; width: 100%; border: solid 1px black; min-height: 0; }
.flattened { height: 0px; overflow:hidden; }

以下HTML：

<nav>
<ul>
    <li class="top"><a href="#">Item 1</a></li>
    <li class="top"><a href="#">Item 2</a>
        <ul>
            <li><a href="#">SubItem 1</a></li>
            <li><a href="#">SubItem 2</a></li>
        </ul>
    </li>        
    <li class="top"><a href="#">Item 3</a></li>
</ul>
</nav>

希望这适合你。

可变菜单长度

2 个答案: