CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menu
annu025
annu025

Reputation: 45

Dropdown closes after every click

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><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>

Upvotes: 4

Views: 8117

Answers (1)

jad-panda
jad-panda

Reputation: 2547

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><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>

Upvotes: 4

Related Questions