Bootstrap 4 nested dropdown?

前端未结

关注

 3  1060

What I am trying to do is if anyone click on arts then History sociology and geography submenu should show up. It should now appear when someone clicks on Arts.
https://

相关标签:

3条回答

走了就别回头了

2021-01-06 14:47

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "arts") {
            $("#type").html("<option value='history'>history</option><option value='sociology'>sociology</option><option value='geography'>geography</option>");
        } else if (val == "science") {
            $("#type").html("<option value='maths'>maths</option><option value='physics'>physics</option>");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <option value="na">--Select an Item--</option>
    <option value="arts">Arts</option>
    <option value="science">Science</option>
</select>

0 讨论(0)

爱一瞬间的悲伤

2021-01-06 14:48

In following code I use Django template for loop to loop over multiple drop-down data. This code generates 2 level dropdown, with second level dropping on left side:

<li class="nav-item dropdown ">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="false">
        Dropdown
    </a>
    <ul class="dropdown-menu " aria-labelledby="navbarDropdown">
        {% for campus in object_list %}
            <li class="dropdown-submenu dropleft">
                <a class="dropdown-item dropdown-toggle " href="#">{{ campus.name }}</a>
                <ul class="dropdown-menu ">
                    {% for school in campus.school.all %}
                        <li><a class="dropdown-item"
                               href="">{{ school.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        {% endfor %}
    </ul>
</li>

0 讨论(0)

遥遥无期

2021-01-06 15:08

I think this is kinda what you are looking for.

Your updated code with one of the suggestions given in there would look something like the example given.

(If you use Angular you could use ngx-dropdowns they have a solution for nested dropdowns)

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');


  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });


  return false;
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

<!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" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="dropdown show">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Streams
                  </a>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <li><a class="dropdown-item" href="#">Science</a></li>
      <li><a class="dropdown-item" href="#">Commerce</a></li>
      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Arts</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">History</a></li>
          <li><a class="dropdown-item" href="#">Geography</a></li>
          <li><a class="dropdown-item" href="#">Sociology</a></li>

        </ul>
      </li>
    </ul>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

0 讨论(0)