Question

我想在ul上打开面板而不是推ul然后打开面板..它必须从上到下滑动

代码是：

<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Collapsible Panel</h2>
<button data-toggle="collapse" href="#collapse1">dasda</button>
  <div class="panel-group">
    <div class="panel panel-default">
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body"><ul><li>asda</li><li>asda</li><li>asda</li><li>asda</li><li>asda</li></ul></div>
      </div>
    </div>
  </div>
</div>
<ul><li>asda</li><li>asda</li><li>asda</li><li>asda</li><li>asda</li></ul>

</body>
</html>

jsfiddle 有什么建议吗？

修改

点击按钮面板上的li会打开另一个li ..在我的代码中，当我点击时，它正按下li然后打开面板..就像example发生的那样...但是我想在我的代码中单击按钮从顶部打开到按钮

Answer 1

在要覆盖其他元素顶部的元素上使用position: absolute;或position: fixed;。 This JSFiddle demonstrates。将它们绑定在父级中，然后可以根据需要将其视为任何其他元素和位置。这意味着父母在组织内容时不会考虑孩子。 Here is some more detail

注意，您需要重新考虑其他元素的定位，但是会达到预期的效果。

这是有效的，因为新的位置值将元素从文档流中取出，这意味着其他子元素不再在其周围流动。它们围绕仍然在文档流中的其他元素流动。

Answer 2

您应该将自己的类添加到要悬停其他元素的面板中，如下所示：

<div class="panel-group my-panel"> 并添加此css规则：

.my-panel{
    position: absolute;
    top: 90px;
    left: 15px;
}

在fiddle

中试用

注意：这不是一个非常理想的解决方案，但在简单的情况下可以很好地为您服务。

在li上打开面板

2 个答案: