Автор сценария:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Навигация:
<ul class="globalnav">
<li>
<div class="title"><a href="#" target="_self">Home</a></div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink"><a href="#" target="_self">Link1</a></div>
<div class="navlink"><a href="#" target="_self">Link1</a></div>
</div>
</div>
</li>
...
Вышеприведенный код - это то, что я использую прямо сейчас, которое не работает в Chrome, как предполагалось. * Мне нужно держать мой клик, чтобы просмотреть div. Я использую mouseover, он не работает должным образом в IE и FF.
У меня также возникает проблема с отображением связанного div заголовка (в заголовке заголовка, show specific div) из-за характера самого формата кодирования (клиентский код). Прямо сейчас, при наведении указателя мыши на заголовок, он показывает первое содержимое li для "navlinks".
Здесь скрипка, чтобы показать вам
благодаря
Почему вы используете индекс элемента .title
, если другой LI выглядит так, which
переменная всегда будет 0
, и это не способ настроить правильную .dropdown
?
Попробуйте что-нибудь еще
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
И если вы хотите, чтобы раскрывающийся список был виден во время его зависания, поместите его внутри элемента, который запускает mouseleave
<li>
<div class="title">
<a href="#" target="_self">Home</a>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink"><a href="#" target="_self">Link1</a></div>
<div class="navlink"><a href="#" target="_self">Link1</a></div>
</div>
</div>
</div>
</li>