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

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

0 голосов
/ 10 января 2012

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

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

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

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

Ответы [ 3 ]

1 голос
/ 11 января 2012

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

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

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

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

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

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

0 голосов
/ 03 февраля 2016

попробуйте 

<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;

});

0 голосов
/ 10 сентября 2015

Легкая часть - просто открыть правую и закрыть остальные 

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

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

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

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