JQuery переключить багги - PullRequest
Новая
       0

JQuery переключить багги

0 голосов
/ 02 декабря 2010

Я пытаюсь создать меню навигации на боковой панели, где при наведении курсора на элементы появляется определенный div.

HTML выглядит так: 

<ul id="nav">
    <li id="item1">Item1</li>
    <li id="item2">Item2</li>
    <li id="item3">Item3</li>
</ul>

<div id="item1_content">
   blah1
</div>
<div id="item2_content">
   blah2
</div>
<div id="item3_content">
   blah3
</div>

JQuery выглядит так: 

$(document).ready(function() {
 //hides all content at load
 $("#item1_content").hide();
 $("#item2_content").hide();
 $("#item3_content").hide();


 //when item 1 hovered over, hide all else and display item 1 content
 $("#item1").hover(function(){
    $("#item2_content").hide(),
    $("#item3_content").hide(),
    $("#item1_content").fadeIn("fast");
 });
 $("#item2").hover(function(){
    $("#item3_content").hide(),
    $("#item1_content").hide(),
    $("#item2_content").fadeIn("fast");
 });
 $("#item3").hover(function(){
    $("#item2_content").hide(),
    $("#item1_content").hide(),
    $("#item3_content").fadeIn("fast");
 });

Однако, хотя это работает, если вы медленно наводите курсор на элементы, кажется, что он не скрывает весь текст, когда вы быстро просматриваете их. Я начинающий с jQuery, и я уверен, что это наименее эффективный способ сделать это. Как я могу получить хороший эффект наведения, который не будет вызывать ошибки, и как я могу сделать мой код более эффективным? (С использованием классов, в частности)

Спасибо.

1 Ответ

1 голос
/ 02 декабря 2010

Я не смог обнаружить, что он не исчезает, но, так как исчезновение быстрое, возможно, это просто я не могу его найти. Я обнаружил, что иногда элементы не исчезают. Это потому, что они скрыты, пока они находятся в процессе исчезновения. Чтобы решить эту проблему, вам нужно позвонить stop(true, true), чтобы остановить любую текущую анимацию и перейти к ее концу, прежде чем скрыться.

Я сделал некоторые изменения в вашей DOM, чтобы использовать классы для идентификации, а не ID. 

<ul id="nav">
    <li id="item1">Item1</li>
    <li id="item2">Item2</li>
    <li id="item3">Item3</li>
</ul>

<div class="item1 content">
    blah1
</div>
<div class="item2 content">
    blah2
</div>
<div class="item3 content">
    blah3
</div>

Единственное, что я хотел бы изменить, это добавить стиль .content { display: none; } вместо вызова $('.content').hide(); в DOMReady, поскольку это может привести к мерцанию элементов во время загрузки страницы.

Теперь, когда они являются классами, мы можем сократить это до одного метода: 

$(function() {
    $("#nav li").mouseover(function(){
       $(".content").stop(true, true).hide(),
       $("." + $(this).attr('id')).fadeIn("fast");
    });
});

Я изменил hover на mouseover, так как наведение срабатывает дважды (один раз при наведении мыши и один раз при наведении мыши), что, кажется, не то, что вы хотите.

Второй селектор в обратном вызове при наведении мыши ищет любой элемент того же класса, что и идентификатор текущего элемента. Поэтому наведите курсор мыши на #item3 и найдите .item3.

...