Question

我有一个下拉菜单，我想在单击菜单按钮时向下滑动，在再次单击时向上滑动。单击文档中的任何其他位置时也会向上滑动。

这是我到目前为止所得到的：jsfiddle

HTML：

<nav>
  <a class="dropdown-toggle" href="#" title="Menu">Menu</a>
  <ul class="dropdown">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</nav>

Jquery的：

$(function() {
  // Dropdown toggle
  $('.dropdown-toggle').click(function() {
    $(this).next('.dropdown').toggle(function() {
      $('.dropdown').stop().animate({
        top: '100%'
      }, 'slow');
    });
  });

  $(document).click(function(e) {
    var target = e.target;
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
      $('.dropdown').toggle(function() {
      $('.dropdown').stop().animate({
        top: '-100px'
      }, 'slow');
    });
    }
  });
});

我所做的问题是动画只发生一次，只有在点击打开下拉菜单时才会发生。

Answer 1

我不确定您是否知道 .slideUp() ， .slideDown() 和 .slideToggle() jQuery中可用的方法来做这个滑动动画的上下业务。

以下是供您参考的摘录：

＆＃13;

var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
  dropdown.slideUp(0);
  $(document).on('click', function(e) {
    var target = e.target;
    if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
      if (dropdown.is(':visible')) {
        dropdown.stop(true).slideUp();
      }
    }
  });
  dropdownToggle.on('click', function() {
    dropdown.stop(true).slideToggle();
  });
});

＆＃13;

body { padding: 2em; }
a {
  text-decoration: none;
  color: #000;
}
nav { position: relative; }
.dropdown-toggle {
  padding: .5em 1em;
  background: #777;
  border-radius: .2em .2em 0 0;
}
ul.dropdown {
  position: absolute;
  top: 100%;
  margin-top: .5em;
  background: #777;
  min-width: 12em;
  padding: 0;
  border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
  text-decoration: none;
  padding: .5em 1em;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
  <ul class="dropdown">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Search</a></li>
  </ul>
</nav>

＆＃13;

备注：

您在相同的元素上应用了CSS transition，并且您还尝试通过在同一元素上使用jQuery的.animate()方法来应用动画。两者相互冲突。我删除了CSS transition部分。

我也删除了height: 0部分，你会注意到那里有一个dropdown.slideUp(0)行，它基本上应用了.slideUp() 0个height: 0个持续时间的动画来立即设置元素$account_hidden = ""; for ($i = 0; $i < $account_length; $i++) { $account_hidden .= '*'; } echo $account_hidden . PHP_EOL;。

希望这有帮助。

Answer 2

对任何有兴趣的人回答我自己的问题，这就是代码：

$(function() {
  $('.dropdown').hide();
  $('.dropdown-toggle').click(function(e) {
    $('.dropdown').slideToggle(400);
    $('.dropdown-toggle').slideDown('active');
    $('.dropdown').toggleClass('is-active');
    return false;
  });
  $(document).click(function() {
    if ($('.dropdown').is(':visible')) {
      $('.dropdown', this).slideUp();
      $('.dropdown').removeClass('is-active');
    }
  });
});

body {
  padding: 2em;
}
a {
  text-decoration: none;
  color: #000;
}
nav {
  position: relative;
}
.dropdown-toggle {
  padding: .5em 1em;
  background: #777;
  border-radius: .2em .2em 0 0;
}
.dropdown {
  position: absolute;
  margin-top: .5em;
  background: #777;
  min-width: 12em;
  padding: 0;
  top: 0;
  left: 0;
  -webkit-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
  transition: transform .3s
}
.dropdown.is-active {
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  display: block
}
ul.dropdown li {
  list-style-type: none;
}
ul.dropdown a {
  text-decoration: none;
  padding: .5em 1em;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
  <ul class="dropdown">
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Search</a>
    </li>
  </ul>
</nav>

我使用了toggleClass和removeClass来添加我想要的动画和那个翻译（最初来自Slide and Push Menu tutorial的想法）：

 -webkit-transform: translateY(-60px);
 -ms-transform: translateY(-60px);
 transform: translateY(-60px);
 transition: transform .3s

滑动下拉菜单

2 个答案: