2016-07-25 3 views
0

У меня есть выпадающее меню с флажками внутри. Я хочу закрыть раскрывающийся список, когда пользователи нажимают на него.Скрыть выпадающее меню при нажатии на внешнюю сторону

Мой код:

<form> 
<div class="multiselect"> 
    <div class="selectBox" onclick="showCheckboxes()"> 
     <select> 
     </select> 
    </div> 
    <div class="checkboxes" id="checkboxes"> 
     @{ 
      if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0) 
      { 
       //@:<h3>No records were processed.</h3> 

      } 
      else 
      { 
       foreach (var usr in ViewBag.DataActiveEmployee) 
       {     
         <label id="userName">@usr.EmployeeName</label>  
         <input class="checked" type="checkbox" name="search_emp" id="search_emp" [email protected]> 
       @: 
     } 
      } 
     } 

    </div> 
</div> 

JS

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

$('multiselect').click(function() { 
    $("#checkboxes").hide(); 
}); 

Проблема находится внутри второй функции JavaScript, потому что, когда я нажимаю на улице, ничего не происходит.

Пожалуйста, помогите.

+0

Что произойдет, если вы поместите атрибут OnClick на самой форме? – brianlmerritt

ответ

1

Попробуйте использовать event.target для обработки события нажатия:

UPDATE

$(document).on('click', '.multiselect .selectBox', function(e) { 
 
    e.stopImmediatePropagation(); 
 
    $('#checkboxes').show(); 
 
}); 
 

 
$('body').on('click', function(e) { 
 
    if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) { 
 
    $('#checkboxes').hide(); 
 
    } 
 
});
#checkboxes, 
 
.multiselect { 
 
    padding:15px; 
 
    border:1px solid #d8d8d8; 
 
} 
 

 
.selectBox { display: inline; } 
 

 
#checkboxes { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="multiselect"> 
 
    <div class="selectBox"> 
 
     <select> 
 
     </select> 
 
    </div> 
 
    <div class="checkboxes" id="checkboxes"> 
 
     <label id="userName">Employee 1</label>  
 
     <input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1"> 
 
     <label id="userName">Employee 1</label>  
 
     <input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1"> 
 
    </div> 
 
</div>

+0

Я попробовал то, что вы предлагаете, и его не работает. На самом деле у меня есть эта ошибка. ** Неподготовлено ReferenceError: $ не определено. ** Я не понимаю, почему – SomeAnonymousPerson

+0

Загружается ли jQuery при вызове этой функции? Это сообщение сообщает вам, что код не распознает символ $ (псевдоним jQuery) – kapantzak

+0

Правильно, ошибка исчезла. Но поведение такое же – SomeAnonymousPerson

0

Проверьте, если цель нажмите на РОМ сам выпадающий или нет, как

$(document).on("click", function(event){ 
     var $trigger = $(".checkboxes"); 
     if($trigger !== event.target && !$trigger.has(event.target).length){ 
      $(".checkboxes").hide(); 
     }    
    }); 

Он должен работать.

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