我创建了一个非常简单的示例,阅读了许多与 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
ul
的 li
元素的最基本的清除:ul:after {
clear: both;
content: "";
display: block;
}
jsfiddle: http://jsfiddle.net/heznn9rm/6/ 。
关于javascript - slideToggle() 导致第一个 li a 在点击时跳转,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28660666/