我创建了一个非常简单的示例,阅读了许多与 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();
  });

最佳答案

您需要垂直对齐 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 ulli 元素的最基本的清除:
ul:after {
  clear: both;
  content: "";
  display: block;
}

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

关于javascript - slideToggle() 导致第一个 li a 在点击时跳转,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28660666/

10-12 12:24
查看更多