jquery - BootStrap 下拉类不需要吗？

Question

我目前正在摆弄 Bootstrap 试图理解它。在查看 Bootstrap 关于下拉菜单的文档时，我遇到了以下代码:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" 
    id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria- 
    expanded="false">
    Dropdown
    </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
            <button class="dropdown-item" type="button">Action</button>
            <button class="dropdown-item" type="button">Another 
            action</button>
            <button class="dropdown-item" type="button">Something else 
            here</button>
       </div>
</div>

可以查看here .

我删除了外部 <div class="dropdown">包装器，并且代码运行得非常好(见下文)。

<button class="btn btn-secondary dropdown-toggle" type="button" 
id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria- 
expanded="false">
Dropdown
</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else 
        here</button>
    </div>

显然data-toggle也发生了类似的事情。属性 - 无论有没有它，代码都可以正常运行，如 here 所示。 .

我不明白的是，为什么这仍然有效？为什么我们可以去掉外层 <div>标签基本上没有重复？

Answer 1

不是真的，当你说它工作正常时，下拉菜单会显示在切换上，但菜单的位置不正确。这是因为 .dropdown 有 position:relative; 这有助于 .dropdown-menu 正确定位。

position: absolute; require a parent element with position:relative;. In the below example it is the body tag, and it can be any element depending on the structure.

使用 .dropdown

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

没有.dropdown (你可以看到菜单的位置在底部，并且不在按钮附近)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

没有 .dropdown 但有相对父级

.another_parent {
  position: relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<div class="another_parent">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>