点击一次即可将此子导航向上滑动的高度

11 浏览
0 Comments

点击一次即可将此子导航向上滑动的高度

我有一个列表，其中一些项目有子导航：\n

\n我有这个脚本，当点击.slidedown-toggle时，它计算子导航

    的高度，然后根据具有\'toggle\'类的父

  • 将其更改为0。\n 
    $(document).ready( function(){ 
  var $slidedownToggle = $('.nav-sidebar .slidedown-toggle');
  $slidedownToggle.click(function () {
    var $slidedown = $(this).parent('.slidedown'); // 获取容器项目
    var $subnav = $(this).siblings('.nav-sub'); // 获取需要上下滑动的ul
    var totalHeight = 0; // 计算显示所有
  • 所需的高度（以像素为单位）
    $subnav.find('li').each(function() {
      totalHeight += $(this).outerHeight(true);
    });
    // 在父
  • 上切换'open'类
    $slidedown.toggleClass('open');
    // 设置适当的高度
    if ($slidedown.hasClass('open')) {
      $subnav.css({height: totalHeight + 'px'});
    } else {
      $subnav.css({height: '0px'});
    }
  });
});

    • \n我遇到的问题是，有时

  • 已经添加了\'class=\'open\'\'，因为当您在\'subnav\'页面上时，我希望展开菜单以显示您所在的位置。因为我在.slidedown.open的CSS中设置了height: auto，所以高度在首次点击\'slidedown-toggle\'时没有动画效果（我知道整个使用max-height进行滑动，但我不想要这个）。如何解决这个问题？也许先在点击时设置高度，然后将其设置为0？\n最简单的方法是查看JSBIN。点击第二个\'show menu\'时，它会很好地上下滑动。点击第一个时，第一次点击不会滑动（因为高度是自动的）。我该如何解决这个问题？http://jsbin.com/poxiy/2/edit

0

2 答案

0 Comments

这个问题的出现原因是想要实现一个导航栏，在鼠标悬停在父级菜单项上时显示子菜单，鼠标移开时隐藏子菜单。然而，这个功能只在悬停时生效，而不是在点击时生效。

解决方法是修改JavaScript代码，使得子菜单在第一次点击父级菜单项时显示，再次点击时隐藏。以下是修改后的代码：

JavaScript:

$(document).ready(function() {
  $('#nav li').click(function() {
    if ($(this).children('ul').is(':hidden')) {
      $(this).children('ul').slideDown();
    } else {
      $(this).children('ul').slideUp();
    }
  });
});

通过修改代码，可以实现在第一次点击父级菜单项时显示子菜单，再次点击时隐藏子菜单的功能。

0
0 Comments

问题的原因是当点击子导航时，无法实现平滑的向上滑动效果。为了解决这个问题，使用了一个不太优雅的方法，即在ready处理程序中为打开的子导航分配一个高度。代码如下：

$('.nav-sidebar .slidedown.open .nav-sub').height(function(){
    return $(this).height();
})

另外，还提供了另一种解决方法的讨论链接，可以参考下面的帖子：

- [CSS transition height: 0; to height: auto;](https://stackoverflow.com/questions/3508605)

- [CSS transition auto height not working](https://stackoverflow.com/questions/13938460)

有人问到为什么这被称为“nasty hack”（不太优雅的方法）。虽然还有其他CSS解决方案，但当子导航的长度不同且某些情况下非常长时，这些解决方案会失败。也许使用标准的`.show()`和`.hide()`方法会更好，但是与CSS动画相比，我发现动画有时会有些卡顿。（我对CSS动画不是专家）我之所以称其为“nasty hack”，是因为可能存在更优雅的解决方案，而我们现在所做的是一种hack方法。

0