problème dans la fonction bascule de jquery

J'ai une section dans mon site Web qui doit être basculée en cliquant sur le titre.problème dans la fonction bascule de jquery

maintenant j'écrit ce code pour activer en cliquant sur le titre

$(document).ready(function(){ 
$(".toggle_container").hide(); 
$("h4.trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow"); 
}); 
});

partie html:

<h4 class="trigger"><a href="javascript:void(0)">'.$row[title].'</a></h4> 
<div class="toggle_container"> 
<div class="block"> 
    '.$row[text].' 
</div> 
</div>

maintenant avec ces tout code va bien, jusqu'à ce qu'il ouvre simplement tous les titres cliqués et non ferme ceux ouverts;

1er

maintenant je dois changer ce script d'une manière que lorsque je clique sur un titre pour activer vérifiez d'abord ceux ouverts et fermer les premier

2ème

et l'autre chose que je me demande est comment faire le premier titre à ouvrir déjà, lorsque la page a chargé le premier titre à ouvrir

merci à l'avance

Source

2010-07-02 Mac Taylor

Je suis le seul à ne pas voir de code PHP ici? – fabrik

juste un FYI $ ("h4.trigger"). Cliquez sur (function() { $ (this) .toggleClass ("actif"). Next(). SlideToggle ("lent"); }); est mieux écrit comme $ ("h4.trigger"). Click(). ToggleClass ("active"). Next(). SlideToggle ("lent"); –

@Mark - Ce code a une signification ** complètement ** différente. Son code est un gestionnaire d'événements pour l'événement click, le vôtre déclenche l'événement click et effectue des actions sur chaque h4.trigger, pas du tout ce qu'il recherche. –

J'espérais une des autres réponses mettrait à jour et corriger ce problème, mais les basculer jamais les deux, ils ont toujours montrent, voici comment basculer et cacher les autres comme vous voulez:

$(function(){ 
    $(".toggle_container:gt(0)").hide(); 
    $("h4.trigger").click(function(){ 
    $(this).toggleClass("active").next().slideToggle("slow") 
      .siblings(".toggle_container").slideUp(); 
    }); 
});

You can try out a demo here, il montre le premier en charge, et bascule correctement le reste.

Source

2010-07-02 13:29:02

merci beaucoup, sensationnel . c'était si intelligent –

Cela devrait le faire je suppose

$(document).ready(function(){ 
    $(".toggle_container").hide(); 
$(".toggle_container:first").show(); 
    $("h4.trigger").click(function(){ 
    $(".toggle_container").hide(); 
    $(this).toggleClass("active").next().slideToggle("slow"); 
    }); 
});

Source

2010-07-02 12:49:28 Ergec

Cela affichera toujours le prochain '.toggle_container' sur click, puisque vous en cachez * tous * à chaque clic, faisant de la classe toggle state /' .active' une représentation invalide de ce qui se passe. –

Html

<h4 class="trigger"><a href="javascript:void(0)">Title1</a></h4> 
<div class="toggle_container"> 
<div class="block"> 
    Test 
</div> 
</div> 
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4> 
<div class="toggle_container"> 
<div class="block"> 
    Test 
</div> 
</div> 
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4> 
<div class="toggle_container"> 
<div class="block"> 
    Test 
</div> 
</div>

Javascript

$(document).ready(function(){ 
    $(".toggle_container:gt(0)").hide(); 
    $("h4.trigger").click(function(){ 
    $(".toggle_container:visible").slideUp('slow'); 
    $(this).toggleClass("active").next().slideToggle("slow"); 
}); 
});

Vous pouvez vérifier démo travailler à http://www.jsfiddle.net/XnV69/3/

Source

2010-07-02 12:59:01 Kai

Cela souffre du même problème que l'autre réponse ... il va toujours montrer, ne jamais basculer :) Devrait être quelque chose comme ça: http://www.jsfiddle.net/XnV69/4/ –

problème dans la fonction bascule de jquery

Répondre

Questions connexes