I am using Twitter Bootstrap in my web app and have included bootstrap.css/js files. But when I click on menu base it doesn't unfold and nothing happens.
Any idea what is wrong? Here is my code:
<li class="dropdown">
menu base
<ul class="dropdown-menu" aria-labelledby="more-drop">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
Here is the Working Code:
Working Fiddle: Dropdown Menu Fix
Mistake:
1- Dropdown Menu 'aria-labelledby' is not defined
2- Anchor Tag ID is not set with 'aria-labelledby' value
aria-labelledby: Identifies the element (or elements) that labels the current element.
<li class="dropdown">
<a id="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
<ul class="dropdown-menu" aria-labelledby="more-drop" aria-labelledby="dropdownMenu1">
<li class="dropdown-menuitem">
sub menu1
</li>
<li class="dropdown-menuitem">
sub menu2
</li>
</ul>
</li>
You have missed the following attributes necessary for Bootstrap dropdown to work as toggle dropdown menu.
role="button"
aria-haspopup="true"
aria-expanded="false"
Code Snippet
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<ul>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
Hope this may helps you
<!DOCTYPE html>
<html>
<head>
<title>dropdown menu of twitter bootstrap doesn't work — doesn't unfold</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<li class="dropdown">
menu base <b class="caret"></b>
<ul class="dropdown-menu">
<li>sub menu1</li>
<li>sub menu2</li>
</ul>
</li>
</body>
</html>
Related
I'm trying to create a nav bar with dropdown as it's explained in the Materialize documentation.
http://archives.materializecss.com/0.100.2/navbar.html
This is the code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
But when i click the dropdown button, nothing happens.
What am I doing wrong?
There are two problems with your code:
You were missing a reference to materialize.min.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
The newest version of Materialize uses data-target instead of data-activates. The documentation you're reading is for an older version. Here is the latest documentation: https://materializecss.com/ (I've updated the versions for you in the example below.)
$('.dropdown-button').dropdown();
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
You need to load the Materialize js as well - https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<script>$(".dropdown-button").dropdown();
</script>
I did an interesting test.
When I just create a html page detached from my project and past the code you sent me here, it works even in my machine. It's not working inside my project in the app.component.html (I'm using angular client) and it won't load after running with npm start. Maybe some configuration in the project.
I have some dropdowns that contain multiple elements that I would like to collapse if open when any other menu item is clicked. Here is what I have so far:
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Master CSS -->
<link rel="stylesheet" href="master.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
<!-- end sidebar -->
</body>
As you can see when you click on 'About' or 'Pages' their dropdown opens, however they do not close unless you click on the specific heading again. I would like any open dropdown to close, unless you click on the dropdowns heading, in which case all dropdowns will close and then the correct dropdown shall open.
Here you go with a solution
$('a').click(function(){
if(!$(this).next('ul').hasClass('in')) {
$('.collapse').each(function(){
$(this).removeClass('in');
});
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="wrapper">
<nav class="sidebar" id="sidebar-id">
<ul class="list-unstyled nav components">
<li class="active"><i class="glyphicon glyphicon-home"></i>Home</li>
<li>
<i class="glyphicon glyphicon-briefcase"></i>About
<ul class="collapse list-unstyled" id="aboutSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-duplicate"></i>Pages
<ul class="collapse list-unstyled" id="pagesSubmenu">
<li>Pages 1</li>
<li>Pages 2</li>
<li>Pages 3</li>
</ul>
</li>
<li><i class="glyphicon glyphicon-link"></i> Portfolio</li>
<li><i class="glyphicon glyphicon-send"></i>Contact</li>
</ul>
</nav>
Hope this will help you.
Will you please tell me what is wrong about this code !!!
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Register</li>
<li class="dropdown">
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Messages</li>
<li>Friends</li>
<li>Profile</li>
<li>Settings</li>
<li>Login</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
I am also including this within my html file :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
When i click the dropdown menu it is not functioning at all , please i need help.
The jquery call should come first.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
also, you forgot the close tag on the bootstrap call.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</script>
should be:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ˆ
I want to know which element was clicked in bootstrap menu.
I have a menu which has dropdown, so I want to know which menu item was clicked and I want to store it in browser local storage how to do this?
JS FIDDLE
I tried this for getting the menu item clicked but it does not work:
document.addEventListener('click', function(e) {
alert(e.target.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Also how to store and retrieve thier value from database?
add a delegate click event to .dropdown-menu for the anchors:-
updated fiddle
$('.dropdown-menu').on('click', 'a', function(e){
// 'this' is the clicked anchor
var text = this.text;
var href = this.href;
alert(text);
// here add to local storage;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
First of all, you have to be more specific about what elements you want to add a listener to. You have to add a specific class to these elements. Then you can do this easily with jQuery:
$(".yourClassName"){
//$(this) will refer to the element
}
That way you can store in local storage the content of the clicked element:
$(".yourClassName"){
var value = $(this).text();
var id = $(this).attr("id");
localStorage.setItem(id , value );
}
And that way you retrieve their value:
var value = localStorage.getItem(itemId);
Dropdown closes after every mouse click. The dropdown should close only after hitting the "Close (X)" button. How can I do that?
Plunk:
http://plnkr.co/edit/7mcBoyfbrT3FNl2vJLjh?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</body>
</html>
If you want to do this in native bootstrap then this answer is right.
But, I would recommend you using angular ui bootstrap (https://angular-ui.github.io/bootstrap/). as, you are using angular.js(in plunker) and angular ui bootstrap provides all bootstrap components as directives. and you won't have to write angular wrapper around native bootstrap components.
Luckily, dropdown in angular ui bootstrap provides option for auto-close which you can set to outsideClick so it won't close when you click inside inside dropdown.
Angular UI Bootstrap Dropdown Docs
See the working example below.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctrl', function($scope) {
$scope.closeDropDown = function() {
$scope.isopen = false;
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div class="btn-group" dropdown is-open="isopen" auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
Options <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
<ul>
<label class="checkbox">
<input type="checkbox">Open
</label>
</ul>
<ul>
<label class="checkbox">
<input type="checkbox">Close
</label>
</ul>
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>
<button type="button" ng-click="closeDropDown()">Close (X)</button>
</li>
</ul>
</div>
</div>
</div>