JQuery всплывающее событие с вложенными элементами

Question

В настоящее время у меня есть ваше основное, заурядное дерево меню следующим образом:

<ul id="nav">
  <li>
    <a href="#">home</a>
    <div class="controls">Some controls go here</div>
    <ul>
      <li>
        <a href="#">item 1</a>
        <div class="controls">Some controls go here</div>
      </li>
      <li>
        <a href="#">item 2</a>
        <div class="controls">Some controls go here</div>
      </li>
    </ul>
  </li>
</ul>

div с классом «controls» для начала скрыты. Я хочу, чтобы, когда вы наводите курсор мыши на ли, отображаются элементы управления соответствующей лини (когда вы убираете мышь, они снова скрываются). Проблема возникает, когда вы наводите курсор мыши на одну из вложенных библиотек li, она отображает также родительские элементы управления. Вот jQuery, который я использую:

    $("#nav li").hover(
        function() {
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
    );

Спасибо за вашу помощь. Remy

Answer 1

Попробуйте остановить распространение события в функции наведения, чтобы предотвратить пузыри события до родителя. Возможно, вы захотите взглянуть на плагин hoverIntent , чтобы решить проблемы с "мигающими" эффектами наведения, если ваши "зависшие" элементы находятся близко друг к другу.

$("#nav li").hover(
    function(e) {
            e.stopPropagation();
            $(".controls:first", this).css("display", "block");
        },
        function() {
            $(".controls:first", this).css("display", "none");
        }
);

Answer 2

Вы можете сделать это без js, хотя вам потребуется js для ie6.

что-то вроде этого может работать:

$(this).children('div').css("display", "block");

или даже:

$(this).children('div').show();

Здесь «это» - это ли.