jQuery Dropdown par un jQuery Dummy

function rightFrame(e) { 
    $('#' + e).css({ 
     'position': 'relative', 
     'top': '0px', 
     'left': '30px', 
     'visibility': 'visible' 
    }); 
    $('#' + e).show(); 
} 

$(document).ready(function() { 
    $('.link').mouseover(function(e) { 
     rightFrame($(this).data('item')); 
    }); 
    $('.link').mouseout(function(e) { 
     if ($(this).is(":visible") == true) { 
      if ($(this).is(':hover') == true) { 
       $('.right').hide(); 
      } 
     } 
    }); 
});

Okay juste pour me qualifier ici, je ne connais pratiquement rien à propos de jQuery ou JavaScript. J'ai commencé avec le code de base pour faire apparaître la boîte de type dropdown, puis je l'ai manipulée pour la rendre telle qu'elle est. Mon objectif est d'afficher la liste déroulante lorsque vous passez la souris sur le lien, tout en vous permettant de cliquer dans la liste déroulante, comme le ferait une navigation déroulante. Mais, comme je l'ai dit, je suis un peu un mannequin quand il s'agit de jQuery/JS. Aidez-moi! PS-Link fait référence au lien que vous survolez pour que la liste déroulante apparaisse. Le droit fait référence à la liste déroulante elle-même.jQuery Dropdown par un jQuery Dummy

<div id="leftcontent"> 
    <hr size="1" color="#555" /> 
     <a href="#"><div class="link" data-item="r1">HOME<br /><span class="littlelink">THE HOMEPAGE</span></div></a> 
     <a href="#"><div class="right" id="r1">asdf</div></a> 
    <hr size="1" color="#555" /> 
     <a href="#"><div class="link" data-item="r2">PORTFOLIO<br /><span class="littlelink">SOME OF MY WORK</span></div></a> 
     <a href="#"><div class="right" id="r2">asdf</div></a> 
    <hr size="1" color="#555" /> 
     <a href="#"><div class="link" data-item="r3">PRICES<br /><span class="littlelink">YOUR INVESTMENT</span></div></a> 
     <a href="#"><div class="right" id="r3">asdf</div></a> 
    <hr size="1" color="#555" /> 
     <a href="#"><div class="link" data-item="r4">CONTACT<br /><span class="littlelink">GET IN TOUCH</span></div></a> 
     <a href="#"><div class="right" id="r4">asdf</div></a> 
    <hr size="1" color="#555" /> 
</div><!-- end leftcontent -->

Source

2013-09-21 Kelly Goeken

s'il vous plaît partager le code html aussi –

pouvez-vous ajouter votre code html en question .... –

Oui désolé oublié de le faire. –

Vous devez définir votre liste déroulante articles que les enfants de votre bouton cette comme ils ne disparaissent pas quand votre souris va aux articles (seulement si les articles sont placés juste à côté du bouton)

donc pour votre problème, je vous suggère

<div class="link"> 
    <a href="..."> ... </a> 
    <div class="right"> 
     <a href="..."> ... </a> 
    </div> 
</div>

Source

2013-09-21 09:17:02

Oh bien sûr! Oui, c'était exactement ce dont j'avais besoin. Je vous remercie! –

Je suis content d'avoir pu aider. –

parfois mouseOut ne peut pas déclencher correctement si juste utiliser slideToggle();fadeToggle();

$(document).ready(function() { 
    $('.link').mouseover(function(e) { 
    //$(this).closest('a').next('a').find('.right').fadeToggle(400); //ITS FOR YOUR OLD HTML 
      $(this).find('.right').slideToggle(400); 
      //above 50 is speed of animation 
    }); 

});

utiliser ce code html pour la liste déroulante

<ul> 
    <li class="link"> 
     <a href="#">Link....</a> 
     <ul class="right"> 
      <li><a href="#">Sublink-1</a></li> 
     </ul> 
    </li> 
</ul>

Source

2013-09-21 09:07:53

Je ne suis pas sûr que ce soit ce que je cherche. Je veux que la liste déroulante reste indéfiniment jusqu'à ce qu'elle ne soit plus planée. Cela ne le ferait-il pas disparaître après un certain temps? –

maintenant vérifier ... –

jQuery Dropdown par un jQuery Dummy

Répondre

Questions connexes