Закрыть раскрывающийся список Div при нажатии вне

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

.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; 
 
\t \t overflow-y : scroll; 
 
\t \t width: 148px; 
 
\t \t 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; 
 

 
    }

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

Может кто-нибудь помочь мне и закрыть выпадающий DIV, когда я нажимаю вне в любом месте страницы. Невозможно использовать jquery, поскольку мое приложение не позволит этого. Это разрушает другие экраны.

Мне нужен код Чистый JavaScript

Спасибо заранее.

источник

2016-05-04 Susha

проверить это - http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element –

$ является не признанная функция - это ошибка, которую я получаю. Как я сказал ранее, мне нужен только java-скрипт. Не включаются теги jquery. – Susha

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>

источник

2016-05-04 09:55:45

Видели ли вы, что он просил чистое (ванильное) решение для javascript? – michaPau

Thanks @michaPau – Susha

Закрыть раскрывающийся список Div при нажатии вне

ответ

Смежные вопросы