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>
Related
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>
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);
I am developing my first App with AngularJS. I am trying to create a Dropdown menu, but unable to bring it under control. Here is the html:
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Split button!</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>
This does give me the desired output as shown below:
but the dropdown is always open, instead of toggling.
Can someone please advise what I am doing wrong?
======= Here are the header files =========
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="dist/css/mobile-angular-ui-base.min.css" />
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="dist/js/mobile-angular-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Required to use $swipe, $drag and Translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
<script type="text/javascript" src="app.js"></script>
The answer on your question is using last versions of Angular+jQuery+Bootstrap+Angular UI.
I am trying to add to my dropdown one of the classes of animate css with bootstrap 3 dropdown native events but it doesn't work. Could you help me with this problem.
Thank you very much.
Here is the markup
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
</head>
<body>
<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">
<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" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li 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" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
$('.dropdown').on('show.bs.dropdown', function () {
$(this).children('.dropdown-menu').addClass('fadeInLeft');
})
</body>
</html>
Wrap your script inside a script element and update to this, using jQuery's native fadeIn:
<script>
$('.dropdown').on('show.bs.dropdown', function () {
$(this).children('.dropdown-menu').fadeIn(500);
});
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).children('.dropdown-menu').fadeOut(500);
});
</script>
http://jsfiddle.net/ebovbyv5/1/
I am trying to use the twitter bootstrap to show input with dropdown button as mentioned in http://getbootstrap.com/components/
Below is the complete html same the one specified in the sample, But I am unable to get this working.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<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><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<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 dropdown-menu-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</body>
</html>
Request anyone to point out what is going on wrong as the dropdown is missing?
Thanks in Advance,
-Senthil
You are missing bootstrap js
Add this js in your <head> section
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
You'll want to add a "data-target" attribute to the button and an "id" to the dropdown.
<button data-target="#MYIDHERE" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
<ul id="MYIDHERE" class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
</ul>