JQuery Dropdown - PullRequest
Новая
       8

JQuery Dropdown

0 голосов
/ 01 января 2011

Мне удалось сделать JQuery выпадающим, однако я не могу сделать его развернутым, когда одна из дочерних ссылок перевернута.

Код: 

<li>
    <a  onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a>
      <ul class="dropdown-1">
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li>
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li>
      </ul>
    </li>

Ответы [ 2 ]

2 голосов
/ 01 января 2011

HTML: 

<li id="menu">
  <a href="/hosting">Why Veoloo</a>
  <ul class="dropdown-1">
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li>
    <li><a href="#">Our Support Scope</a></li>
  </ul>
</li>

JavaScript: 

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

пример:

http://jsfiddle.net/gurPn/1/

[EDIT]: Обновлен, чтобы использовать метод наведения (jQuery) и запускать переход от родительского контейнера (это позволяет захватывать событие mouseleave только в контейнере, обеспечивая желаемый эффект выпадающего меню).

0 голосов
/ 01 января 2011

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

<script type="text/javascript"> 
$(document).ready(function(){ 

     $(".sidebar").mouseenter( 
         function pl(){ 
               $(".sidebar").stop().animate({width: "184px",left:"760px"},750,"linear"); 
 }
     ); 
     $(".sidebar").mouseleave( 
          function pl2(){ 
               $(".sidebar").stop().animate({left: "900px",width: "45px"},750,"linear"); 
          }
     );

}); 
</script>

Онлайн пример на http://sdfreelance.vistapanel.net/

Обновление

Вам нужно будет поместить функцию в первый LI 

<li id="dropdown">
   <a  href="/hosting">Why Veoloo</a>
   <ul class="dropdown-1">
      <li ><a href="#">The Reasons (15)</a></li> 
      <li ><a href="#">Customer Testimonials</a></li>
      <li ><a href="#">Our Support Scope</a></li>
   </ul>
</li>


    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#dropdown").mouseenter(

Использование onmouseover непосредственно в теге приведет к ошибке, если все необходимые сценарии не будут загружены домышь переходит в меню.

...