Dropdown парения состояние

Question

HTML:

<ul class="dropdown"> 
    <li><a href="#">Item 1</a></li> 
    <li> 
     <a href="#">Item 2</a> 
     <div class="submenu">something</div> 
    </li> 
</ul> 

JQuery:

$j("ul.dropdown li").hover(function() { 
     $j(this).addClass("hover"); 
     $j('div.submenu', this).css('visibility', 'visible').hover(function() { 
       $j(this).prev('a').addClass('hover'); 
      }, function() { 
       $j(this).prev('a').removeClass('hover'); 
      });  
    }, function() { 
     $j(this).removeClass("hover"); 
     $j('div.submenu', this).css('visibility', 'hidden'); 
    }); 

... меню работает отлично, но ссылка навигации (которая открывает выпадающее меню), должны оставаться подсвечивается, когда на dropped- вниз. Как сохранить состояние зависания как по ссылке, так и подменю, когда они открыты?

Спасибо!

Answer 1

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

$j("ul.dropdown li").hover(function() { 
    $j(this).children('a').andSelf().addClass("hover"); 
    $j('div.submenu', this).css('visibility', 'visible'); 
}, function() { 
    $j(this).children('a').andSelf().removeClass("hover"); 
    $j('div.submenu', this).css('visibility', 'hidden'); 
}); 

Если вы явно не нужны visibility и display будет работать, вы можете сделать это:

$j("ul.dropdown li").hover(function() { 
    $j(this).children('a').andSelf().addClass("hover"); 
    $j('div.submenu', this).show(); 
}, function() { 
    $j(this).children('a').andSelf().removeClass("hover"); 
    $j('div.submenu', this).hide(); 
}); 

Answer 2

Если вы используете visibility: hidden вместо display: none, то страница зарезервирует визуальное пространство, которое должен занимать элемент, что обычно не является желательным при вложенном меню

Если visibility - это то, что вы хотите, игнорируйте меня. В противном случае, вот альтернатива, которая использует display (который сохраняет каждый выбранный элемент в иерархии выделены, которые, казалось бы, что ваш вопрос был просить):

Стиль

li.hover { background: #eee; } 
li.hover ul { background: #fff; } 
ul ul { display: none; } 

HTML

<ul> 
    <li><a href="#">Item 1</a></li> 
    <li> 
     Item 2 
     <ul> 
      <li><a href="#">Item 2.a</a></li> 
      <li> 
       Item 2.b 
       <ul> 
        <li><a href="#">Item 2.b.1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Item 3</a></li> 
</ul> 

JQuery

$(function() { 
    $("ul li").hover(
     function() { 
      $(this).addClass("hover").children("ul").show(); 
     }, 
     function() { 
      $(this).removeClass("hover").children("ul").hide(); 
     } 
    ); 
});