Dropdown closes after every mouse click. The dropdown should close only after hitting the "Close (X)" button. How can I do that? Plunk:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src=".3.4/js/bootstrap.min.js"></script>
<script src=".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><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</body>
</html>
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./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis./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><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</body>
</html>
- see this answer. stackoverflow./questions/25089297/… – jad-panda Commented Jun 2, 2015 at 16:01
1 Answer
Reset to default 4If you want to do this in native bootstrap then this answer is right.
But, I would remend 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 ponents as directives. and you won't have to write angular wrapper around native bootstrap ponents.
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./ajax/libs/angularjs/1.3.13/angular.js"></script>
<link href="//netdna.bootstrapcdn./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><a href="#">Action</a>
<ul>
<label class="checkbox">
<input type="checkbox">Open
</label>
</ul>
<ul>
<label class="checkbox">
<input type="checkbox">Close
</label>
</ul>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li>
<button type="button" ng-click="closeDropDown()">Close (X)</button>
</li>
</ul>
</div>
</div>
</div>