Comment se référer à l'élément div by li en dehors de ce div

Question

au début Je dois admettre que mes connaissances sur la programmation est assez basique. Je ne comprends pas tout alors peut-être que ma question peut sembler un peu boiteuse mais quand même mes idées sont épuisées et j'ai besoin de demander. J'ai utilisé un didacticiel de Slide Elements et ajouté une Div Div pour mon site Web, tout fonctionne bien, mais dans cet auteur de didacticiel, j'ai utilisé un élément de bouton à l'intérieur de div div et sur des diapositives div internes. Je veux utiliser un élément li de ma section de navigation qui est en dehors de ce divs mais je ne sais pas comment changer le code de script pour garder l'animation dans ce div. Fondamentalement, il semble:

HTML:

<ul id="navigation"> 
<li class="about"><a title="A" href="#" > </a></li> 
<li class="search"><a title="P" href="#" ></a></li> 
<li class="photos"><a title="G" href="#" ></a></li> 
<li class="rssfeed"><a title="U" href="#" ></a></li> 
<li class="contact"><a title="K" href="#" ></a></li> 
</ul> 

    <div id="IDcontent" class="slide" > 
<button>slide it</button> 
<div class="inner" style="margin-left: 100%"> test </div> 
</div>  

je parviens à modifier le code de script qu'un élément li déclenche une action cliquez pas sur le bouton, mais après un clic, il glisse pas la div mais il glisse un côté élément li.

CODE SCRIPT:

<script> 

$(document).ready(function() { 
    $('#navigation li').click(function() { 
    var $marginLefty = $(this).next(); 
    $marginLefty.animate({ 
     marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
     $marginLefty.outerWidth() : 
     0 
    }); 
    }); 
}); 

    </script> 

Toute sugestions?

Grand Merci!

Answer 1

En raison de cette ligne de code,

var $marginLefty = $(this).next(); 

l'élément suivant li après ce qui a été cliqué sur est animé depuis que vous faites plus tard $ marginLefty.animate() . Si vous voulez animer la div, vous devez définir marginLefty à l'élément div. Donc, remplacer cette ligne avec:

var $marginLefty = $('.inner'); 

Pour en savoir qui li a été cliqué, vous pouvez faire

// $(this) refers to the element that was clicked 
$liClass = $(this).attr("class") 

dans le gestionnaire de clic. Ensuite, vous pouvez changer le contenu de la div en fonction de ce qui a été cliqué, et en utilisant la fonction html(). Par exemple,

var content; 
if($liClass == 'about'){ 
content = 'about clicked'; 
} 
else if($liClass == 'search'){ 
    content = 'search clicked'; 
} 
//more code here 
//more code here 
$marginLefty.html(content); 

Vous pouvez trouver plus d'informations sur .attr() et .html() ici: http://api.jquery.com/attr/ et http://api.jquery.com/html/

Answer 2

Essayez celui-ci:

$(document).ready(function() { 
     $('#navigation li').click(function() { 
     var $marginLefty = $('a', this); 
     $marginLefty.animate({ 
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
      $marginLefty.outerWidth() : 
      0 
     }); 
     }); 
    }); 

Answer 3

Si je comprends bien, vous êtes vouloir un élément LI faire la même chose que l'élément bouton? Vous pouvez simplement déclencher un clic sur le bouton:

$(document).ready(function() { 
    $('#navigation li').click(function() { 
     $('#IDcontent').find('button').trigger('click'); 
    }); 
}); 

Votre élément bouton devra rester sur la page. Cela va essentiellement exécuter n'importe quel code attaché à l'événement click du bouton - chaque fois que vous cliquez sur N'IMPORTE QUEL de vos éléments LI. Vous pouvez régler cela pour travailler sur un élément seulement 1 liste en modifiant le sélecteur:

$('#navigation li.about').click(function() { 
    ... 
    }); 

Cela va attacher cette fonctionnalité à la classe li = « about » élément seulement.

Cela fonctionne si vous prévoyez de laisser le bouton sur votre page. Vous pouvez simplement cacher le bouton en CSS, mais c'est un peu bâclé.Si vous décidez de supprimer le bouton, trouvez simplement le code Javascript que le bouton utilise. Cela ressemblera à ceci:

$('#IDcontent button').click(function(){ ... }); 

ou quelque chose de similaire. Il suffit ensuite de déplacer ce code à l'intérieur de l'événement click du bouton dans l'événement click de l'élément list.