Question

我有2个下拉ol彼此相邻，但是当点击第一个时，它会将第二个下来，而不是将它留在顶部。

我不能将position: absolute与其中任何一个一起使用，因为当下拉列表处于活动状态时，底部会有内容需要按下。

这是我的代码

HTML

<div id="lists">
 <div id="list_one">
 <a>List One</a>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
  </ol>
</div>

<div id="list_two">
 <a>List Two</a>
  <ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
  </ol>
 </div>
</div>

CSS

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
}

#list_one {
 width: 100px;
 border: 2px solid red;
}

#list_one ol {
 display: none;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 top: -25px;
 left: 200px;
}

#list_two ol {
 display: none;
}

的jQuery

$('#list_one a').click(function(){
 $('#list_one ol').toggle();
});

$('#list_two a').click(function(){
 $('#list_two ol').toggle();
});

jsfiddle：https://jsfiddle.net/e3tctuzp/

Answer 1

在容器中左右浮动两个列表，然后将容器的显示设置为内联块。

所以列表的CSS将是：

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
 display:inline-block
}

#list_one {
 width: 100px;
 border: 2px solid red;
 float:left;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 float:right;
}

请参阅jsfiddle

Answer 2

不是将列表位置设置为相对位置，而是可以使它们浮动。为此，您需要在#lists中设置overflow: auto。然后，您可以向左浮动列表一，向右列出两个列表。它看起来像这样：

#list_one {   
  ...   
  float: left; 
}

#list_two {
  ...
  float: right; 
}
#lists {
  overflow: auto;
}

以下是您编辑过的小提琴：https://jsfiddle.net/e3tctuzp/2/

显示彼此相邻的2个下拉列表

2 个答案: