Обработки события click для открытия и закрытия меню, в зависимости от цель


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

  • Ссылка была нажата во второй раз, с целью закрытия меню
  • Когда еще открыто меню, первое меню должны закрыть
  • Когда меню открыто, и в любом месте за пределами меню нажал
  • Когда пункт меню нажал

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

$().ready(function () {    
    //Click event mayhem!
    $('html').click(function (event) {
        event.stopPropagation();
        var target = $(event.target);
        switch (target.attr('class')) {
            case 'expandDropDown':
                handleBreadCrumbDropDownClick(target);
                break;
            case 'headlineTitle':
                event.preventDefault();
                handleAccordionItemClick(target);
                break;
            default:
                //Always close dropdown menus, unless they're specifically being opened
                toggleDropDown('.BC-DropDown-Open');
        }
    });
});

function handleBreadCrumbDropDownClick(target) {
    //Get the drop down list being targeted
    var dropDownList = '#' + target.attr('itemprop');
    //Offset of the expander link
    var offset = target.offset();
    if ($(dropDownList).hasClass('BC-DropDown-Open')) {
        //Dropdown is being closed with the expandDropDown link
        $(dropDownList)
                        .hide()
                        .toggleClass('BC-DropDown-Open');
    }
    else {
        //Dropdown is being opened with the expandDropDown link

        if ($('.BC-DropDown-Open').length > 0) {
            //Close existing drop down lists if any
            toggleDropDown('.BC-DropDown-Open');
        }
        //Open selected dropdown
        toggleDropDown(dropDownList, offset);
    }   
}


13844
4
задан 13 мая 2011 в 01:05 Источник Поделиться
Комментарии
1 ответ

В операторе switch не требуется.

Просто установите нажмите кнопку функция для каждого класса.

$(document).ready(function ready () {    
$('.expandDropDown').click( handleBreadCrumbDropDownClick );
$('.headlineTitle').click( handleAccordionItemClick );
});

function handleBreadCrumbDropDownClick() {
var target = $(this);
var dropDownList = $('#' + target.attr('data-itemprop'));
var offset = target.offset();
if ( dropDownList.hasClass('BC-DropDown-Open') ) {
dropDownList
.hide()
.toggleClass('BC-DropDown-Open');
} else {
if ( $('.BC-DropDown-Open').length ) {
toggleDropDown('.BC-DropDown-Open');
}
toggleDropDown(dropDownList, offset);
}
}

2
ответ дан 13 мая 2011 в 10:05 Источник Поделиться