bootstrap выпадающее меню

201

12 ноября 2018, 23:40

С помощью Bootstrap сделал выпадающее меню, но в <li> поставил не ссылки, а input[type=checkbox]. Теперь при каждом клике выпадающее меню исчезает. Как его закрепить, чтобы оно не скрывалось пока кликаем по данным checkbox'ам?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 
 
<div class="btn-group"> 
  <button type="button" class="btn btn-default dropdown-toggle btn_search_filter" data-toggle="dropdown"> 
    <i class="fa fa-search"></i> Где искать? 
    <span class="caret"></span> 
  </button> 
  <ul class="dropdown-menu search_filter"> 
    <li> 
      <label for="users">Пользователи</label> 
      <input id="users" type="checkbox" name="search_local" class="search_input" value="users" placeholder="Пользователи"> 
    </li> 
    <li> 
      <label for="portfolio">Резюме</label>  
      <input id="portfolio" type="checkbox" name="search_local" class="search_input" value="portfolio" placeholder="Резюме"> 
    </li> 
    <li> 
      <label for="adverts">Объявления</label>  
      <input id="adverts" type="checkbox" name="search_local" class="search_input" value="adverts" placeholder="Объявления"> 
    </li> 
    <li> 
      <label for="vacancies">Вакансии</label>  
      <input id="vacancies" type="checkbox" name="search_local" class="search_input" value="vacancies" placeholder="Вакансии"> 
    </li> 
  </ul> 
</div>

Answer 1

Можно использовать такую структуру:

$('.search_filter > li > label').click(function(e) {
    var checkbox = $(this).siblings('input[type=checkbox]'); // Нашли чекбокс
    checkbox.prop("checked", !checkbox.prop("checked"));     // Установили атрибут checked в зависимости от текущего значения
    return false;                                            // Сбили клик
});

$('.search_filter > li > label').click(function(e) { 
    var checkbox = $(this).siblings('input[type=checkbox]'); 
    checkbox.prop("checked", !checkbox.prop("checked")); 
    return false; 
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 
 
<div class="btn-group"> 
  <button type="button" class="btn btn-default dropdown-toggle btn_search_filter" data-toggle="dropdown"> 
    <i class="fa fa-search"></i> Где искать? 
    <span class="caret"></span> 
  </button> 
  <ul class="dropdown-menu search_filter"> 
    <li> 
      <label for="users">Пользователи</label> 
      <input id="users" type="checkbox" name="search_local" class="search_input" value="users" placeholder="Пользователи"> 
    </li> 
    <li> 
      <label for="portfolio">Резюме</label> 
      <input id="portfolio" type="checkbox" name="search_local" class="search_input" value="portfolio" placeholder="Резюме"> 
    </li> 
    <li> 
      <label for="adverts">Объявления</label> 
      <input id="adverts" type="checkbox" name="search_local" class="search_input" value="adverts" placeholder="Объявления"> 
    </li> 
    <li> 
      <label for="vacancies">Вакансии</label> 
      <input id="vacancies" type="checkbox" name="search_local" class="search_input" value="vacancies" placeholder="Вакансии"> 
    </li> 
  </ul> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Visual Studio ошибка: “Нет шабонов по указаному пути”

Всем привет, имеется веб приложение, которое использует DLL библиотеки и вот мне понадобилось в них (в DLL ках) кое-что дописать, значит, открыл...

199

RayCast по Sprites

В проекте есть некий код для определения слоев

182

Имитация ручного ввода текста selenium webdriver

Собственно как сделать имитацию ручного ввода текста в selenium webdriver, по сколько метод SendKeys не подходит, он вводит строку одним разом, а нужно...

306

Потеря знаков при конвертации строки в double

Есть возможно сделать как-то чтобы не терялись знаки при конвертации строки в double при следующих ситуациях?

167