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

+ ul元素上包含浮动li s的最基本的clearfix：

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

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

Answer 2

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

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

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

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

slideToggle（）导致第一个li a跳转点击

2 个答案: