javascript - 将切换的 div 直接对齐到父级下方

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 定位将菜单放在您想要的位置。如果你想让所有东西对齐得更好，我会让“标题”文本成为一个元素并对其应用边框/填充/等，并以相同的方式设置菜单样式设置为 left: 0; top: 100%; 将其左对齐并将其放在“标题”下方

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

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

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