javascript - slideToggle() 导致第一个 li a 在点击时跳转

Question

我创建了一个非常简单的示例，阅读了许多与 slideToggle() 类似的问题，但未能找出解决方法。 使用 slideToggle() 时，如何摆脱点击第一个 li a 时的跳转？另见 jsFiddle

HTML

<ul>
    <li><a href="#">Click</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
</ul>

CSS

 ul {
        background:#ddd;
    }

ul li {
    display:inline;
    background:lightyellow;
}

ul li:not(:first-child) {
    display:none;
    display:inline;
}

jQuery

$('ul li:first-child').on('click', function () {
  $('ul li:not(:first-child)').slideToggle();
  });

Answer 1

您需要垂直对齐您的 inline li 元素，在本例中为顶部:

ul li {
  display: inline;
  vertical-align: top; // the important part
  background: lightyellow; 
}

更新的 jsfiddle:http://jsfiddle.net/heznn9rm/5/ .

阅读有关 vertical-align 属性的更多信息:MDN

另一种(我敢说更常见的)方法是 float你的 li 元素在左边 - 在这种情况下你可能还想使用 CSS clearfix .

ul li {
  float: left;
  background: lightyellow;
}

+ 包含 float li 的 ul 元素的最基本的 clearfix:

ul:after {
  clear: both;
  content: "";
  display: block;
}

jsfiddle:http://jsfiddle.net/heznn9rm/6/ .