Question

下拉项目类仅在使用下拉类但在下拉类中无法正常工作时才能正常工作。
单击全部子菜单项后，Dropup不起作用。因为所有下拉商品在每次点击后都会变为有效并显示 代码段和方案下面给出的问题图片。

1.第一张图片：所有子菜单激活和显示

2.第二张图像：检查元素

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <title>DropUp bootstrap</title>
  </head>
  <body>
  
<ul class="nav flex-column">

    <li class="nav-item dropdown mb-5">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropDown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
        </div>
    </li>

    <li class="nav-item dropup mt-5">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropUp</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
        </div>
    </li>

</ul> <!-- End nav -->

<div class="tab-content mt-1">

    <div class="tab-pane fade" id="hello1">
      <h1>Hello 1</h1>
    </div> <!-- End hello1 -->

    <div class="tab-pane fade" id="hello2">
      <h1>Hello 2</h1>
    </div> <!-- End hello2 -->

    <div class="tab-pane fade" id="hello3">
      <h1>Hello 3</h1>
    </div> <!-- End hello3 -->

</div> <!-- End tab-content -->


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 1

这是Bootstrap 4.0.0中的已知问题：https://github.com/twbs/bootstrap/issues/25759

解决方法是同时使用dropdown和dropup类进行＆＃34;下拉＆＃34;元件。

https://www.codeply.com/go/YiXNLqAzwL

<li class="nav-item dropdown dropup mt-5">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DropUp</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" data-toggle="tab" href="#hello1">Hello1</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello2">Hello2</a>
            <a class="dropdown-item" data-toggle="tab" href="#hello3">Hello3</a>
        </div>
</li>

Dropup Bootstrap类始终保持活动状态并显示状态

1 个答案: