Как многоуровневые выпадающие с использованием Bootstrap? - PullRequest
Новая
       25

Как многоуровневые выпадающие с использованием Bootstrap?

0 голосов
/ 19 февраля 2020

CSS

<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>

HTML

<ul class="list-group">
          <li class="list-group-item">
            <div class="dropright show">
              <a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Categories
              </a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Women<span class="caret"></span></a>
              <div class="dropdown-menu">
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#"><a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Personal Care Appliances<span class="caret"></span></a>
                <div class="dropdown-menu">
                  <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Hair Dryers<span class="caret"></span></a>
                </div></a><span class="caret"></span></a>
                <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#"><a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Jewellary<span class="caret"></span></a>
                <div class="dropdown-menu">
                  <a class="dropdown-item dropdown-submenu" href="#"><a class="multidrp" tabindex="-1" href="#">Artificial Jewellary<span class="caret"></span></a>
                </div></a><span class="caret"></span></a>
              </div></a>
                <a class="dropdown-item" href="#">Home Furniture</a>
                <a class="dropdown-item" href="#">TVs and Appliances</a>
                <a class="dropdown-item" href="#">Sports, Books & More</a>
                <a class="dropdown-item" href="#">Mobiles and Gadgets</a>
                <a class="dropdown-item" href="#">Men</a>
                <a class="dropdown-item" href="#">Pets</a>
                <a class="dropdown-item" href="#">Baby</a>
                <a class="dropdown-item" href="#">Cars & Bikes</a>
              </div>
            </div>
          </li>
</ul>

JS

<script>
$(document).ready(function(){
  $('.dropdown-submenu .multidrp').on("click", function(e){
    $(this).next('div').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

Дорогой сэр, мэм ... Как добиться многоуровневого выпадающего списка, используя Bootstrap? выше есть мой кусок кода, в котором я пытаюсь показать женщин и женщин, 1. приборы личной гигиены 2. ювелирные изделия должны отображаться в раскрывающемся списке и в пределах средств личной гигиены, фены должны отображаться и в пределах ювелирных изделий, искусственные украшения должны отображаться

...