Как получить CSS выпадающих меню, чтобы оставаться открытым, даже когда вы нажимали вне меню?

У меня есть запрос от клиента обрабатывать их выпадающее меню. У меня есть меню, работающие в виде выпадающих списков, но они просили, чтобы выпадающие страницы не были на паре, но их нужно «щелкнуть», чтобы отобразить их, даже все сумасшедшие подменю.Как получить CSS выпадающих меню, чтобы оставаться открытым, даже когда вы нажимали вне меню?

Кроме того, они хотят, чтобы меню оставалось открытым (закрепленным) в их обнаруженном состоянии, даже если верхний уровень навигационного элемента закрыт. Я знаю, что это странное поведение, но это то, что они хотят. Следует отметить, что в любой момент должен быть открыт только один верхний пункт меню nab. Они используют iframe для отображения hrefs, поэтому нам не нужны файлы cookie, чтобы сохранить состояние меню в это время, но это было бы неплохо для будущего;) Я не человек с javascript, это было вымощено вместе из кода, который я собрал, но я в недоумении. Мне удалось изменить немного JS за один раз, чтобы обработать открытие меню с помощью щелчка, но как только мышь вышла из UL, она исчезнет.

Я отправил свой код до сих пор здесь: http://jsfiddle.net/9dJ9T/8/

Можно ли получить меню для отображения только при нажатии и остаются открытыми и «прижат», пока они не все впоследствии «откреплены»? В идеале я думаю, что метод jquery .toggle будет лучше, но в этой системе меню так много UL и LI в нем я не могу себе представить, как создавать функции каждого из них !! Есть ли способ, чтобы такая функция могла быть абстрагирована для упрощения кода, а не в конечном итоге с огромным списком функций? Я очень хочу учиться у мастеров JS !!

источник

2012-01-10 Trevor

Действительно ли _all_ этого кода? Там много несвязанных CSS и JS, что помогает справиться с гораздо более сложной задачей. Можете ли вы уменьшить код только до того, что воспроизводит проблему? – David

В общем, вы, вероятно, захотите: 1) удалить CSS-эффект ': hover'; 2) Добавьте обработчик jQuery '.click()' в пункты меню для переключения подменю. Эта последняя часть _should_ будет только для элементов верхнего уровня, поэтому не обязательно вручную привязывать каждое событие. Но если вы хотите сделать больше шаблоном, вам просто нужно иметь селектор для всех элементов меню верхнего уровня, и для каждого из них есть способ идентифицировать его элемент подменю. – David

Я согласен с @David. Вы должны удалить больше своего примерного кода и отделить его до одного элемента меню с помощью пара элементов подменю. Это облегчит нам помощь. – flynfish

Вам не нужно все это. Переделайте его. Вы можете решить это как 10 строк.

Добавить что-то вроде onclick = "displaySubmenu ('someIdOrSomethingOrWhateverYouWant');" на каждой вкладке.

В JS должно быть что-то вроде

function displaySubmenu(el) 
    { 
     // Hide all elements. (Easy to do) 
     // Display the needed one. (document.getElementById('yourSetedId').style.display ='block'); 
    }

Остальное CSS и HTML.

Если вы хотите сохранить затухание, просто сохраните эту функцию и установите ее на свой идентификатор.

источник

2012-01-11 12:24:52 zozo

Легкая часть просто открывает право один и закрытия других

$(".dropTab").on("click", function(){ 
    $(".dropTab").hide(); 
    $(this).show(); 
})

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

$("body").on("click",function(e) { 
    if ($(e.target).closest(".headerBar").length) { 
     return; 
    } 

    $(".dropTab").hide(); 
});

источник

2015-09-10 15:11:13 NachoDawg

попробовать этот

<div class="btn-group" id="myDropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Choice1</a></li> 
<li><a href="#">Choice2</a></li> 
<li><a href="#">Choice3</a></li> 
<li class="divider"></li> 
<li><a href="#">Choice..</a></li></ul></div>

и JS

$('#myDropdown').on('hide.bs.dropdown', function() { 
return false;

});

источник

2016-02-03 15:16:38

Как получить CSS выпадающих меню, чтобы оставаться открытым, даже когда вы нажимали вне меню?

ответ

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