Develop Reference

dropdown javascript for bulma framework

i have the following problem, i am trying to use two dropdowns using javascript and bulma framework
but the problem is that only one dropdown is displayed when I click on it but if I click on the second one it doesn't open.
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
JavaScript Code:
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
I have the respective libraries loaded both bulma and jquery, but I still can't get both dropdowns to work.

You are on the right track, but you're using .querySelector() incorrectly. See the docs:
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document
Emphasis mine.
The solution is to use .querySelectorAll(). This will return an array of all the dropdowns. You can then iterate through them and attach an eventlistener to them.
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});

How to handle click on Bulma's dropdown component?

I'm using bulma in an application and I have a dropdown as follows:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onclick="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
I have the onblur event handler so it will close the dropdown when the user clicks outside of it, but then when the user clicks one of the items from the dropdown the blur event gets triggered and the onclick from the item doesn't. How should I handle this?

The click event is triggered the moment you click and release. You can use a onmousedown event instead so that you get to click the item before the blur get triggered:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onmousedown="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
Of course the above is assuming that you would want to close the dropdown the moment you click on one of the menu items.

Angular2 How to write an effective method to highlight the active menu in navbar

In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!

Putting a dropdown panel in the navbar Bootstrap 3.0.3

I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.

Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>

Bootstrap - Custom Content In Dropdowns?

As the title states, I'm looking to have one single dropdown then have other HTML content in another dropdown submenu, making the dropdown act as a pop out for HTML content. The issue I'm having so far is that once I try just putting a div and code into the UL tag for the secondary drop down, it no longer stays visible on hover. Here is my current markup,
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <i class="icon-caret-down"></i></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<div>
<h1 style="color: #333;">Things</h1>
</div>
</ul>
</li>
The markup is to be honest horrendous as of now, but is there an easier way to have custom content in a Bootstrap sub drop down? This way is causing miles upon miles of issues.

You can think of this way:
<ul class="unstyled">
<li class="dropdown">
<a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<li>
<div class="custom">
<h1 style="color: #333;">Things</h1>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This makes the menu more semantically correct and valid... I feel something you might require in the CSS is:
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}
Preview
Fiddle: http://jsfiddle.net/praveenscience/yEJ3c/

If you don't need the other children and you're just looking for a rich dropdown, perhaps you want to be using the Popover component instead of the Dropdown component.

Update for Bootstrap 4 - it's now easy to add custom HTML to dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Option one</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col">Html</div>
<div class="col">Content</div>
<div class="col">Here</div>
</div>
</a>
</div>
</div>