如何平滑滑动切换类,并在单击如何隐藏下拉菜单时

时间:2018-06-18 15:18:27

标签: javascript jquery html css

我之前问过这个问题,希望你有认真的解决方案,我用固定菜单项更多按钮,如果项目宽度大于菜单栏空间,此按钮将包含下拉菜单,单击时工作正常在更多的下拉菜单上会出现但不顺畅或滑落我想要点击任何地方想要隐藏下拉菜单

   <script>
    var $nav = $('.greedy-nav');
    var $btn = $('.greedy-nav button');
     var $vlinks = $('.greedy-nav .visible-links');
    var $hlinks = $('.greedy-nav .hidden-links');
    var breaks = [];
    function updateNav() {
    var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - 
    $btn.width() - 30;
    if($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if($btn.hasClass('hidden')) {
    $btn.removeClass('hidden');
 }
  } else {
  if(availableSpace > breaks[breaks.length-1]) {
  $hlinks.children().first().appendTo($vlinks);
  breaks.pop();
  }
 if(breaks.length < 1) {
  $btn.addClass('hidden');
  $hlinks.addClass('hidden');
 }
 }
 $btn.attr("count", breaks.length);
 if($vlinks.width() > availableSpace) {
 updateNav();
}
}
 $(window).resize(function() {
  updateNav();
  });

$btn.on('click', function() {
$hlinks.toggleClass("hidden");
 });
 updateNav();
 </script>

0 个答案:

没有答案