Question

＆＃13;

var expanded = false;
function showCheckboxes() {
    var checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
    } else {
        checkboxes.style.display = "none";
        expanded = false;
    }
}

＆＃13;

.multiselect {
        width: 148px;
    }
    .selectBox {
        position: absolute;
    }
    .selectBox select {
        width: 148px;
        /*font-weight: bold;*/
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
        height: 120px;   
		overflow-y : scroll;
		width: 148px;
		font-size: 13px;

    }
    #checkboxes label {
        display: block;
        position: relative;
        /*overflow: visible;*/
        z-index: 10;
        background-color: white;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
        color: white;

    }

＆＃13;

<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select name="abc" style="width: 150px" title="Input the name" id="abc">
<option>Select</option>
</select>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="1"><input type="checkbox" name="multipleteams" id="1" value ="1"/>No1</label>
<label for="2"><input type="checkbox" name="multipleteams" id="2" value ="2"/>No2</label>
<label for="3"><input type="checkbox" name="multipleteams" id="3" value ="3"/>No3</label>

</div></div></div>

＆＃13;

当我点击页面中的任何地方外，有人可以帮助我并关闭此下拉列表。没有jquery可以用作我的应用程序将不允许它。它破坏了其他屏幕。

我需要纯粹的Javascript代码

提前感谢。

Answer 1

enter link description here

$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <h2>Dropdown Example</h2>
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>    
    </ul>
  </div><br>
  <p><strong>Note:</strong> The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.</p>
</div>

在外面点击时关闭下拉Div

1 个答案: