Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. 

 <div class="container">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" href="#">Size6</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size5</a>
              <ul class="dropdown-menu">
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555555</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size4</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size3</a>
              <ul class="dropdown-menu">
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size2</a>
              <ul class="dropdown-menu">
                <li><a href="#">22222222222222</a></li>
                <li><a href="#">22222222222222</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size1</a>
              <ul class="dropdown-menu">
                <li><a href="#">111111111111111111</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

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

The complete code example can be found here.

My current issue is that when switching from Size6 to Size5, both dropdowns are displayed simultaneously. I want to close the current submenu when transitioning between different dropdown menus. The problem can be seen in the image below:

https://i.sstatic.net/ATn8W.png

javascripthtmlcsstwitter-bootstrapdropdown

Answer №1

Make the siblings disappear with a click on a.test.

$(document).ready(function() {
      $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        $(this).parent('li').siblings('li').find('ul:visible').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
.dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
    }
 <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.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
  <div class="container">
    <h2>Multi-Level Dropdowns</h2>
    <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
    <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" href="#">Size6</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size5</a>
              <ul class="dropdown-menu">
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555555</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size4</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size3</a>
              <ul class="dropdown-menu">
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size2</a>
              <ul class="dropdown-menu">
                <li><a href="#">22222222222222</a></li>
                <li><a href="#">22222222222222</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size1</a>
              <ul class="dropdown-menu">
                <li><a href="#">111111111111111111</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

Answer №2

Did you find what you were seeking, such as a Dropdown with sub-menus and nested sub-menus?

(function($) {
  $(document).ready(function() {
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
  });
})(jQuery);
li.main{
padding:20px;
border:1px solid grey;
display:inline-block
}
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #555;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>
  <li class="dropdown main">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown A <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown 1</a></li>
      <li><a>Dropdown 2</a></li>
      <li><a href="#">Dropdown 3</a></li>
      <li class="divider"></li>
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu 4.1</a></li>
          <li><a href="#">Dropdown Submenu 4.2</a></li>
          <li><a href="#">Dropdown Submenu 4.3</a></li>
          <li><a href="#">Dropdown Submenu 4.4</a></li>
        </ul>
      </li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu 5.1</a></li>
          <li><a href="#">Dropdown Submenu 5.2</a></li>
          <li><a href="#">Dropdown Submenu 5.3</a></li>
          <li class="divider"></li>
          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown Submenu 5.4.1</a></li>
              <li><a href="#">Dropdown Submenu 5.4.2</a></li>
              <li class="divider"></li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
                </ul>
              </li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown main">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown B <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown Link 1</a></li>
      <li><a href="#">Dropdown Link 2</a></li>
      <li><a href="#">Dropdown Link 3</a></li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu Link 4.1</a></li>
          <li><a href="#">Dropdown Submenu Link 4.2</a></li>
          <li><a href="#">Dropdown Submenu Link 4.3</a></li>
          <li><a href="#">Dropdown Submenu Link 4.4</a></li>
        </ul>
      </li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu Link 5.1</a></li>
          <li><a href="#">Dropdown Submenu Link 5.2</a></li>
          <li><a href="#">Dropdown Submenu Link 5.3</a></li>
          <li class="divider"></li>
          <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
              <li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
              <li class="divider"></li>
              <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
                </ul>
              </li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty viewing image in Firefox using HTML <img> tag

I'm encountering an issue with rendering an img tag in an HTML page. The img source is a file located on a remote server. Surprisingly, when attempting to display the image in Firefox using: file://///server/folder1/folder2/name.jpg it shows up prop ...

htmlimage

The <Span> element appears as bold in Internet Explorer when placed inside a table, whereas it appears as regular text in Google

I've successfully coded 5 dabbles, utilizing divs for precise positioning. Upon inspection in Chrome and IE, I noticed that the text appears bold in IE, unlike Chrome where it looks normal. To address this difference, I incorporated the <span> a ...

htmlgoogle-chromeinternet-explorerhtml-table

Managing the vertical positioning of grid items: tips and tricks

Is there a way to make the hexagons in my grid responsive to the layout, so that their height and width remain fixed relative to their container? Currently, they are overflowing from the grid container as shown in this jsfiddle: https://jsfiddle.net/gv5wc1 ...

htmlcsscss-grid

React - Clearing State data retrieved from axios request

I am currently facing an issue with resetting the state of an object in my users array upon clicking the delete button. Even after successfully removing the object from the database, the state does not update as intended. I have managed to verify the prese ...

javascriptjsonreactjsfetchaxios

Error TS2322: Cannot assign type 'Promise<Hero | undefined>' to type 'Promise<Hero>'

I am currently studying angular4 using the angular tutorial. Here is a function to retrieve a hero from a service: @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return new Promise(resolve => { // ...

javascriptangulartypescript

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Utilizing X-editable in an ASP MVC View: navigating the form POST action to the controller

I have been utilizing the X-Editable Plugin to collect user input and perform server submissions. However, I am encountering an error during submission. What adjustments should I make in order to ensure that the x-editable data functions properly with the ...

javascriptajaxasp.net-mvcx-editable

Implement rotation in Three.js that mirrors the functionality of Blender

Is there a way to permanently change the default rotation of a mesh in three.js after it has been loaded? For example, if I load a mesh with a rotation of 0,0,0, can I then rotate it 90 degrees on the X axis and set this new rotation as 0,0,0? It's i ...

javascriptthree.js

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

javascriptjqueryhtmlcss

Emphasize identical terms in AngularJS through bold formatting

I am facing a situation where I need to apply bold formatting to specific words in an HTML string (editorData) using AngularJS, based on whether they match certain keywords (data or dataArray). It is important to note that the case of the words in editorD ...

jqueryhtmlangularjs

Tips for retrieving data from Angular Material Table source

It's great to see everyone doing well! I'm facing an issue with rendering data to a material table, and I can't figure out why it's not working. When I try to assign the data to the table's datasource for rendering, the information ...

javascripthtmlangular

Ways to reset input fields following form submission

I've been trying to figure out how to clear the input fields once the form is submitted, but for some reason, the input data remains there even after each submission. I'm using ajax jquery form. Any ideas on how to resolve this issue? Thank you ...

javascriptphpjqueryajax

Explore nested arrays and retrieve objects that have corresponding categories

Working with react+ nextJS and fetching static objects, specifically "posts". The aim is to develop a "related posts" feature for each post that retrieves three posts containing at least one of the categories. Below is an excerpt simplified for clarity: co ...

javascriptarraysreactjsnext.js

Transform Unicode characters into HTML using Qt

I am facing an issue with a particular string that includes Unicode characters and special symbols. The string, for instance, looks like this: SYMBOLSU+2510\n The string contains the Unicode character U+2510 and a new line symbol \n. I have a lo ...

htmlqtunicode

Pass the radio button value and accompanying text to a PHP script

I am struggling with sending both the radio button value and text to php. Currently, I can only send the radio button value. However, I want to also include the text after the radio button without altering the checkbox information. <input name="li ...

phphtml

my initial attempt at using Firebase cloud functions

I'm currently attempting to create my first Firebase Cloud Function. My goal is to take the value of the 'name' field from the 'amr' document and add it to the 'ahmed' document under a new field called 'newName' ...

javascriptnode.jsfirebasegoogle-cloud-functionsfirebase-admin

Could it be that v-show does not function properly on elements that are not dynamic

I'm not experienced in web development and this is my first attempt at using a web framework. The framework I am currently learning is vue.js version 3. My goal: I want to create 4 app instances (nav, defaultApp, bootstrapApp, vueApp). When I select ...

javascripthtmlvue.js

What is the process for retrieving a value from JSON utilizing JavaScript?

Unfortunately, I am completely stumped when it comes to Javascript. I'm attempting a few solutions based on online resources. If anyone could offer some assistance, that would be greatly appreciated. Below is the JSON data provided. It has been conde ...

javascriptjson

Mobile devices experiencing issues in loading Javascript scripts

Let me start by sharing my JS code: function getTimeRemaining(endTimeInput) { var endTime = new Date(endTimeInput); var currentTime = new Date(); var t = endTime - currentTime; var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 100 ...

javascriptjquerymobile

Microphone Malfunction: Abrupt End of Input Detected

I have been experimenting with SpeechRecognition to incorporate microphone functionality into one of my projects. However, when I check the Chrome Console, it displays the error message: Unexpected end of input const speechRecognition = window.webkitS ...

javascriptmicrophone