如何使用jQuery垂直切换（）内容？

时间：2018-12-17 00:54:53

标签： jquery html css

我正在使用jQuery的{{1}}为网站的移动版本创建topnav。通过单击按钮，应该从页面顶部切换菜单，我的代码可以工作，但是如果仔细看，似乎文本在水平方向上消失了，而不是垂直方向上消失了。有没有办法也强制文本垂直切换？

js-fiddle version

toggle()

$(".button").click(function () {
  $(".item").toggle(300);
});

body {
  font-family: 'Helvetica Neue';
  font-size: 14px;
  font-weight: 100;
  background: #fff;
  color: #000000;
  /* font-weight: 300; */
}

.item {
  display: none;
  visibility: none;
}
 
.center {
  text-align: center;
}

1 个答案:

答案 0 :(得分：1)

使用`.slideToggle()`。

顺便说一句，<script>标签位于<head>标签内部或结束</body>标签之前。具有<p>属性的[href]标签也无效。具有<a>属性的<link>，<base>或[href]有效。

下面的演示有两个按钮：

$('.item').slideToggle(300);
$('.item').toggle('slide', {direction: 'down'}, 300);

第二个按钮将失败，因为选项：

  ('slide', {direction: 'down'}, 300);

是jQuery UI或jQuery 1.8或更早版本（.toggle(handler, handler, [handler])在jQuery 1.9中已删除）的语法。

演示

$(".button1").click(function() {
  $('.item').slideToggle(300);
});

$(".button2").click(function() {
  $('.item').toggle('slide', {
    direction: 'down'
  }, 300);
});

body {
  font: 100 small-caps 14px/1.45 Arial;
}

a {
  display: block;
  text-align: center;
}

.item {
  display: none;
}

code {
  font: 100 normal 10px/1.45 Consolas;
}

<!DOCTYPE html>
<html>

<head></head>

<body>

  <nav class='menu'>
    <a class='item' href='#'>Item 1</a>
    <a class='item' href='#'>Item 2</a>
    <a class='item' href='#'>Item 3</a>
  </nav>

  <a class='button1' href="#/">1. <code>$('.item').slideToggle(300);</code></a>

  <a class='button2' href="#/">2. <code>$('.item').toggle('slide', {direction: 'down'}, 300);</code></a>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>