Question

尝试让切换的div直接在父级下方对齐时遇到一些麻烦。它似乎出现在右边，略高于父母的顶部。

这将用于编辑器工具栏，文本编辑器stackoverflow和各种论坛使用。

不确定解决它的最佳和最简单的方法。

$(document).on('click', ".editor-dropdown", function() {
  $('.editor-dropdown-content', this).toggle(); // p00f
});

.editor-dropdown {
  background: #ffffff;
  border: 1px solid #ddd;
  cursor: pointer;
  float: left;
  padding: 5px 14px;
}

.editor-dropdown-content {
  display: none;
  z-index: 900;
  position: absolute;
  background: #ffffff;
  border: 1px solid #ddd;
  padding: 5px 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
  Header
  <b class="caret-down"></b>
  <div class="editor-dropdown-content">
    <span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
  </div>
</div>

示例：https://codepen.io/anon/pen/JNQZzM

Answer 1

将父级设置为position: relative，然后使用top/left定位将菜单放在您想要的位置。如果你想让一切都更好地对齐，我会做出＃34;标题＆＃34;给一个元素添加文本并对其应用border / padding / etc，并按照设置为left: 0; top: 100%;的方式设置菜单的样式，使其左对齐并将其放在＆＃34; header＆＃34;

下面

＆＃13;

$(document).on('click', ".editor-dropdown", function()
{
	$('.editor-dropdown-content', this).toggle(); // p00f
});

＆＃13;

.editor-dropdown {
  float: left;
  position: relative;
}

.dropdown-header {
  background: #ffffff;
  border: 1px solid #ddd;
  cursor: pointer;
  padding: 5px 14px;
  display: inline-block;
}

.editor-dropdown-content {
  display: none;
  z-index: 900;
  position: absolute;
  background: #ffffff;
  left: 0;
  top: 100%;
  border: 1px solid #ddd;
  padding: 5px 14px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">
  <span class="dropdown-header">Header</span>
  <b class="caret-down"></b>
  <div class="editor-dropdown-content">
    <span class="dropdown-option" data-tag="h1">H1</span> H2 H3 H4
  </div>
</div>

＆＃13;

Answer 2

请将“标题”文字放在span标记下，并给它一个类如下：

<div class="editor-dropdown">
    <span class="dropdoanHeader">Header</span>
    <b class="caret-down"></b>
    <div class="editor-dropdown-content">
        <span class="dropdown-option" datatag="h1">H1</span>
        H2
        H3
        H4
    </div>
</div>

之后替换下面的css

.editor-dropdown
{
    background: #ffffff;
    border: 1px solid #ddd;
    cursor: pointer;
    float: left;
}

.dropdoanHeader
{
    padding: 5px 14px;
}

.editor-dropdown-content
{
    position:absolute;
    padding-left:10px;
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 5px 14px;
}

Answer 3

我编辑了如下的CSS

.editor-dropdown-content
{
display: none;
z-index: 900;
position:relative;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
left: 60;
bottom: 100;
}

能够在标题下方对齐它。检查下面的codepen

https://codepen.io/anon/pen/xdoJKp

Answer 4

这就是你想要的吗？

$(document).on('click', ".editor-dropdown", function()
{
	$('.editor-dropdown-content').toggle(); // p00f
});

.editor-dropdown
{
	background: #ffffff;
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 5px 14px;
  width: 200px;
}
.editor-dropdown-content
{
	display: none;
	background: #ffffff;
	border: 1px solid #ddd;
	padding: 5px 14px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor-dropdown">Header
	<b class="caret-down"></b>				
</div>
<div class="editor-dropdown-content">
	<span class="dropdown-option" data-tag="h1">H1</span>
					H2
					H3
					H4
</div>

Answer 5

您可以尝试将position: absolute;添加到.editor-dropdown，然后left: 0;添加到.editor-dropdown-content。

但是，更好的方法是从.editor-dropdown-content

中取出.editor-dropdown

https://codepen.io/anon/pen/dWBjpQ

Answer 6

看一下这个？

HTML：

    <div class="editor-dropdown">
                Header
    <b class="caret-down"></b>
    </div>
    <div class="editor-dropdown-content">
        <span class="dropdown-option" data-tag="h1">H1</span>
        <span class="dropdown-option" data-tag="h1">H2</span>   
        <span class="dropdown-option" data-tag="h1">H3</span>           
        <span class="dropdown-option" data-tag="h1">H4</span>
    </div>

Css：

.editor-dropdown
{
background: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
padding: 5px 14px;  
}
.editor-dropdown-content
{
display: none;
z-index: 900;
top: 40px;
background: #ffffff;
border: 1px solid #ddd;
padding: 5px 14px;
}

.dropdown-option {
 display:block;
}

使用Javascript：

$(document).on('click', ".editor-dropdown", function()
{
$('.editor-dropdown-content').toggle(); // p00f
});

https://codepen.io/anon/pen/ZKdjLJ

在父级正下方对齐切换的div

6 个答案: