2012-06-29 3 views
0

Проблема:первый пункт меню не выбран

У меня есть меню, которое при наведении на родительских элементов, он должен показать первый пункт. например, когда вы наведите курсор на 'Kayaks & Canoes' it должен выделите первый элемент 2+ Person и покажите контент справа.

Вы также должны иметь возможность наведываться на Лодки, а содержимое справа должно меняться. Отбор следует выбирать по умолчанию, но вы также сможете наводить на рыбалку.

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

Что я пробовал?

$(document).ready(function() { 
    //on hover of sub menu li then highlight itself 
    $('div#new-menu-lower ul.menuul li.menuli').hover(

    function() { 

     $(this).children('div#new-menu-lower ul li ul').css("display","block"); 
     $('div#new-menu-lower ul li ul li ul:first').css("display","block"); 
     $('div#new-menu-lower ul li ul li').css("display","block"); 
     $('div#new-menu-lower ul li ul li ul li:first').css("display","block"); 
     $(this).children('div#new-menu-lower ul li ul li ul').css("display","block"); 

    }, function() { 

     $(this).children('div#new-menu-lower ul li ul').css("display","none"); 
     $('div#new-menu-lower ul li ul li ul:first').css("display","none"); 
     $('div#new-menu-lower ul li ul li:first').css("display","none"); 
     $('div#new-menu-lower ul li ul li ul li:first').css("display","none"); 
     $(this).children('div#new-menu-lower ul li ul li ul').css("display","none"); 

    }) 
}); 

JSFIDDLE: http://jsfiddle.net/NDMuu/7/

Я принимаю чистое решение CSS с помощью псевдо-класса :hover Если вы можете заставить его работать, в противном случае я думаю, Jquery/JS это путь?

* EDIT: * Последнее обновление мое описание несколько

+0

любой ?????????????? –

ответ

1

способ получить первый элемент, чтобы показать, по умолчанию использовать if заявление, в котором заявляет, что: если элемент родительского списка является display: block то он также будет будь то. Когда вы наводите курсор на другой, вам нужно только указать другим элементам значение display: none. У меня нет времени исправить весь ваш код, но это то, с чего начать. Сделайте это, и я помогу вам закончить его.

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