javascript - How to use multiple dropdowns in navbar?

Question

I have a navbar with icons and I want that 2 icons have a seperate dropdown menu. This is my code:

<div class="master-menu-right-wrapper">
    <div class="master-menu-right-item"><i class="icon-notifcation"></i></div>
    <div class="master-menu-right-item" id="add-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-add"></i></div>

    //this is not working
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="add-menu">
        <a class="dropdown-item" href="#">New member</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">New admin</a>
    </div> //this is not working

    <div class="master-menu-right-item"><i class="icon-setting"></i></div>
    <div class="master-menu-right-item master-menu-right-user">
        <div class="master-menu-right-user-font">Username</div>
    </div>
    <div class="master-menu-right-item" id="app-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-user"></i></div>
    //works
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="app-menu">
        <label>Welcome</label>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">App 1</a>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary mr-5">Save</button>
            <button type="button" class="btn btn-dark">Edit profile</button>
        </div>
        //works
    </div>
</div>

When I add one drop down its works when I click on the user icon. When I add second drop down it wil overwrite the previous one and I don't get two separate drop downs.

NOTE

I don't want a nested drop menu or multi level. Just 2 separate drop downs for each icon.

I have tried this solution:

Multiple drop-down menus per button group?

This doesn't work for me because the styling will mess up.

How can I have two drop down menu for each icon?

UPDATE:

UPDATE:

CSS code:

 .master-menu-right-wrapper {
            float: right;
            width: auto;
            text-align: right;
            cursor: pointer;
            user-select: none;
        }

        .master-menu-right-item {
            display: inline-block;
            padding-top: 4px;
            height: 48px;
            font-size: 1.6rem;
            text-align: center;
        }


        .master-menu-right-user-font {
            display: inline-block;
            font-size: 1rem;
        }

        .master-menu-right-user {
            margin-top: -10px;
            padding-left: 10px;
            border-left: thin solid #041348;
        }

标签： javascriptjqueryhtmlcsstwitter-bootstrap

Answer 1

You need to wrap each button/dropdown set in a div with class btn-group. That will allow Bootstrap to associate the button with the dropdown.

(The snippet is a bit janky shoehorned into a tiny window. But hopefully with the JS working, you can fix that up with styles.)

.master-menu-right-wrapper {
  float: right;
  width: auto;
  text-align: right;
  cursor: pointer;
  user-select: none;
}

.master-menu-right-item {
  display: inline-block;
  padding-top: 4px;
  height: 48px;
  font-size: 1.6rem;
  text-align: center;
}


.master-menu-right-user-font {
  display: inline-block;
  font-size: 1rem;
}

.master-menu-right-user {
  margin-top: -10px;
  padding-left: 10px;
  border-left: thin solid #041348;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="master-menu-right-wrapper">
  <div class="master-menu-right-item">Notification</div>
  <div class="btn-group">
    <div class="master-menu-right-item" id="add-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Add</div>
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="add-menu">
      <a class="dropdown-item" href="#">New member</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">New admin</a>
    </div>
  </div>

  <div class="master-menu-right-item">Setting</div>
  
  <div class="btn-group">
    <div class="master-menu-right-item master-menu-right-user">
        <div class="master-menu-right-user-font">Username</div>
    </div>
    <div class="master-menu-right-item" id="app-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</div>
    <div class="dropdown-menu master-menu-dropdown" aria-labelledby="app-menu">
      <label>Welcome</label>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">App 1</a>
      <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary mr-5">Save</button>
          <button type="button" class="btn btn-dark">Edit profile</button>
      </div>
    </div>
  </div>
</div>