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();
  });

- agri

Answer 1

您需要垂直对齐内联 li 元素，此处为顶部：

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

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

了解更多关于 vertical-align 属性的信息: MDN。

另一种（我敢说是更常见的）方法是将您的 li 元素向左 浮动，在这种情况下，您可能还想使用 CSS clearfix。

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

+在包含浮动的li元素的ul元素上应用最基本的清除浮动：

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

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

- bardzusny

Answer 2

当您单击锚点（<a href='#'></a>标签）时，默认浏览器操作是尝试跟随引用（在您的情况下是#）。这样，如果引用是id，则浏览器将跳转到页面顶部（如果引用是id，则浏览器将跳转到具有此id的元素）。

使用jQuery（您的情况）防止此默认行为，您可以捕获事件对象并说要防止默认行为。这样：

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

请注意，我们现在获取事件对象function(e)并指定阻止此事件（e）的默认行为e.preventDefault()。

- William Martins