Ссылка раскрывающегося меню показать / скрыть проблему

Question

Ссылка раскрывающегося меню показать / скрыть проблему

0

Необходимо решить два вопроса.

Выпадающее окно не должно появляться, когда я нажимаю флажок в контейнере Item Item.
Выпадающее окно должно быть скрыто, когда я выхожу за пределы меню в любом месте страницы.

Вот мой Jsfiddle:

Поток - это мой код.

HTML
<div class="check_dropdown">
<input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
 <ul class="leads_menu">
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
  <li><a href="#">Sub Menu</a></li>
 </ul>
</div>

CSS
.check_dropdown{
    background:#edecec;
    padding:2px;
    display:inline-block;
    }
.leads_menu {
    display: none;
    position:absolute;
    color: #000;
    cursor:pointer;
    background:#edecec;
}

jQuery
$(function() {
    $(".check_dropdown").each(function() {
        if ($(this).find(".menu_item").length > 0) {
            $(this).mousedown(function() {
                $(this).find(".leads_menu").stop(true, true).slideToggle();
            });          
        }
    });
});

Awais Imran 24 фев. 2014, в 10:15

Источник

Теги:

jquery

4 ответа

0

Вы должны привязать событие к документу или окну, чтобы поймать следующий щелчок /mousedown вне раскрывающегося списка, чтобы закрыть его. jquery дает вам простой метод для этого

$(window).one('mousedown', function() { ... });

Я изменил вашу скрипку, чтобы вы могли ее посмотреть. также вы должны предотвратить распространение события mousedown. в противном случае он перейдет к вашему оконному объекту и вызовет односвязный метод.

http://jsfiddle.net/5FfgZ/2/

Manuel Richarz 24 фев. 2014, в 06:43

0

Возможно, вы хотите

$(document).click(function(){
 $(".leads_menu").hide();
});

$(".menu_item").click(function(e){
  e.stopPropagation();
});

monu 24 фев. 2014, в 06:43

0

Я обновил вашу скрипку рабочим решением

<ul class="check_dropdown">
    <li>
        <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
        <ul class="leads_menu">
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
        </ul>
    </li>
    <li>
        <input type="checkbox"> <a href="#" class="menu_item">Menu Item</a>
        <ul class="leads_menu">
            <li><a href="#">Sub Menu</a></li>
            <li><a href="#">Sub Menu</a></li>
        </ul>
    </li>
</ul>

$(function() {
  $(".menu_item").click(function(e) {
    $(this).siblings('.leads_menu').stop(true, true).slideToggle();
    e.preventDefault();
  });
});

Vincent Mimoun-Prat 24 фев. 2014, в 05:58

Ещё вопросы

James Wong · Accepted Answer · 2014-02-24T07-42-00.000Z

Я обновил вашу скрипку (нажмите здесь), чтобы проверить следующее:

Если элемент, щелкнутый по элементу, является флажком, то запрещается отображать раскрывающееся меню.
Сделал щелчок в любом месте веб-страницы HTML, чтобы вызвать раскрывающийся список, чтобы скрыть.

Изменения находятся на уровне JS: http://jsfiddle.net/5FfgZ/3/

$(function() {
    var menuClicked = false; //Check if user opened the dropdown
    $(document).on('click', function(){
        if(menuClicked){
            menuClicked = false;   
            return;
        }
        if($(".leads_menu").css('display') != 'none'){
            $(".leads_menu").stop(true, true).slideToggle();
        }
    });
    $(".check_dropdown").each(function(e) {
        if ($(this).find(".menu_item").length > 0) {
            $(this).mousedown(function(e) {
                if($(e.target).attr('type') == 'checkbox') return; //Check if element clicked is a checkbox.
                $(this).find(".leads_menu").stop(true, true).slideToggle();
                menuClicked = true;
            });          
        }

    });
});