Как я могу держать свое подменю открытым в меню наведения jQuery? - PullRequest
Новая
       12

Как я могу держать свое подменю открытым в меню наведения jQuery?

4 голосов
/ 08 декабря 2011

Я только начал программировать в jQuery на прошлой неделе, и мне нужна помощь, чтобы понять, как сделать меню должным образом.У меня есть 3 вкладки с собственным меню.Когда отображается страница, автоматически отображается подменю.Как только он отобразится, пользователь может навести курсор на вкладки, чтобы увидеть другие подменю, и когда он перестанет зависать, появится первоначальное подменю.

Моя проблема в том, что, хотя я могу показать им подменю других вкладокЯ не могу оставить подменю открытым, чтобы пользователь мог щелкнуть пункт подменю.В других руководствах показано, как это сделать, только когда вложенное меню вложено в родительский элемент, но в моем коде для структуры меню вложенные подменю отсутствуют (именно так был код при присоединении к проекту).Можно ли каким-то образом сохранить подменю открытым, если пользователь наводит курсор на соответствующей вкладке?

Вот мое меню HTML: 

    <div id="navigation">
        <div id="main-nav">
            <div id="kids"><a href="../images/nav1.png"></a></div>
            <div id="community"><a href="../images/nav2.png"></a></div>
            <div id="about"><a href="../images/nav3.png"></a></div>
        </div>
    </div>

    <div id="sub-nav"> 
        <ul class="menu-1 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-2 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-3 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>

Вот мой jQuery до сих пор: 

// For JS users, display sub menus by default
$(".requiresJS").css("display","block");

var startMenu

//hide all sub menus
$("#sub-nav ul").hide();

// check URL for about, community or kids and set startMenu with correct term
if(window.location.href.indexOf("about") != -1){startMenu = "about"}
else if(window.location.href.indexOf("community") != -1){startMenu = "community"}
else{startMenu = "kids"}

// highlight correct category tab
$("div#main-nav #" + startMenu).addClass("selected");

// show correct starting menu
$("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",distance:13 }, 300);

// show correct menu on mouseover of div
$("div#main-nav div").mouseover(function() {

    $("#sub-nav ul").stop(true, true)
    $("#sub-nav ul").hide();

    var currentId = $(this).attr('id');

    $("#sub-nav ul.menu-" + currentId).show();      
});

$("div#main-nav div").mouseover(function() {
        $("#sub-nav ul").stop(true, true)
        $("#sub-nav ul").hide();
        var currentId = $(this).attr('id');
        $("#sub-nav ul.menu-" + currentId).show();      
});

Ответы [ 2 ]

6 голосов
/ 09 декабря 2011

У меня был похожий случай, и я решил его, разделив событие mouseover на отдельные события mouseenter и mouseleave. Просто псевдокод / ​​контур, но в вашем случае попробуйте что-то вроде: 

$("div#main-nav div").mouseenter(function() {
   // Check if sub menu is open, return if it is allready open
   // (I add a 'menu_open' class to sub menu when it is opened)

   // Code to hide open submenues
   // Code to open selected submenu      
});

Затем используйте mouseleave и свойство toElement его события, чтобы проверить, куда ушел указатель мыши, если он прошел в подменю, ничего не делать, если не закрыть все подменю. Обратите внимание, что вам нужно подключить события mouseleave и к подменю. Примерно так: 

$("#main-nav div").mouseleave(function (event) {
   var toElem = $(event.toElement);
   if (toElem.closest("div.sub-nav").id=="subnav") return; // Prob nicer way to do this...point is to check if mouse enters a submenu, and if so stay open.
   // Close all open submenues, e.g. 
   $("#sub-nav ul").hide();
 });

 $("#subnav ul").mouseleave(function (event) {
    var toElem = $(event.toElement);
    if (toElem.closest("div.sub-nav").id=="subnav") return; // Check if entering submenu
    if (toElem.closest("div#main-nav")) return; // Check if entering main menu
    // Close all open submenues, e.g.
    $("#sub-nav ul").hide();
 });

Надеюсь, это поможет вам. Просто решил это сам, поэтому у меня не было времени, чтобы отполировать, я уверен, что есть лучшие и более красивые способы сделать это.

2 голосов
/ 29 ноября 2012

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

Если вы просто вызовите подменю в селекторе, оно останется «открытым» во время наведения.

http://jsfiddle.net/K5P9Z/

Пример - 

jQuery(document).ready(function($) {

$('#kids, .menu-1').hover(function() {
    $('.menu-1').show();
}, function() {
    $('.menu-1').hide();
});
 $('#community, .menu-2').hover(function() {
    $('.menu-2').show();
}, function() {
    $('.menu-2').hide();
});
 $('#about, .menu-3').hover(function() {
    $('.menu-3').show();
}, function() {
    $('.menu-3').hide();
});

});​
...