J'ai créé une liste sur mon site. Cette liste est créée par une boucle foreach qui se construit avec les informations de ma base de données. Chaque élément est un conteneur avec différentes sections, donc ce n'est pas une liste comme 1, 2, 3 ... etc. Je liste des sections répétitives avec des informations. Dans chaque section, il y a une sous-section. La version générale est la suivante:
<div>
<fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
<legend class="majorpointslegend">Expand</legend>
<div style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>Donc, j'essaye d'appeler une fonction avec onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"
Le div que j'essaie de manipuler est style = "display: none" par défaut, et je veux utiliser javascript pour le rendre visible au clic.
"$ (This) .find ('legend'). InnerHTML" tente de passer, dans ce cas, "Expand" comme argument dans la fonction.
Voici le javascript:
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
document.write.$(this).find('div').style = "display:inherit";
document.write.$(this).find('legend').innerHTML = "Collapse";
}
else
{
document.write.$(this).find('div').style = "display:none";
document.write.$(this).find('legend').innerHTML = "Expand";
}
}Je suis presque sûr à 100% que mon problème est la syntaxe, et je ne sais pas trop comment fonctionne javascript.
J'ai jQuery lié au document avec:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>Dans la <head></head>section.
la source
$(this). J'espère que cela t'aides.Réponses:
D'accord, vous avez donc deux options ici:
fieldset(ce n'est pas sémantiquement correct de l'utiliser pour cela de toute façon) et créer une structure par vous-même.Voici comment procéder. Créez une structure HTML comme celle-ci:
Avec ce CSS: (Ceci est pour cacher le
.contenttruc lorsque la page se charge.Ensuite, à l'aide de jQuery, écrivez un
clickévénement pour l'en-tête.Voici une démo: http://jsfiddle.net/hungerpain/eK8X5/7/
la source
que diriez-vous:
jQuery:
HTML
Violon
De cette façon, vous liez l'événement click à la
.majorpointsclasse et vous n'avez pas à l'écrire dans le HTML à chaque fois.la source
Donc, tout d'abord, votre Javascript n'utilise même pas jQuery. Il y a plusieurs façons de procéder. Par exemple:
Première façon, en utilisant la
toggleméthode jQuery :jsFiddle: http://jsfiddle.net/pM3DF/
Une autre façon consiste simplement à utiliser la
showméthode jQuery :jsFiddle: http://jsfiddle.net/Q2wfM/
Pourtant, une troisième façon consiste à utiliser la
slideToggleméthode de jQuery qui permet certains effets. Tels que$('#showMe').slideToggle('slow');qui affichera lentement le div caché.la source
<li>éléments, pas en divs. Dans tous les cas, il pourrait simplement utiliser l'ID d'élément pour le masquer.Vous voudrez peut-être jeter un œil à cette méthode Javascript simple à invoquer lorsque vous cliquez sur un lien pour agrandir ou réduire un panneau / div.
Vous pouvez transmettre l'ID div et il basculera entre l'affichage «aucun» ou «bloc».
Source originale sur snip2code - Comment réduire un div en html
la source
Beaucoup de problèmes ici
J'ai mis en place un violon qui fonctionne pour vous: http://jsfiddle.net/w9kSU/
la source
essayez jquery,
la source
Voici mon exemple d'animation d'une liste de personnel avec développer une description.
Violon
la source
Jetez un œil à la fonction
toggle()jQuery :http://api.jquery.com/toggle/
En outre, la fonction
innerHTMLjQuery est.html().la source
Puisque vous avez jQuery sur la page, vous pouvez supprimer cet
onclickattribut et lamajorpointsexpandfonction. Ajoutez le script suivant au bas de votre page ou, de préférence, dans un fichier .js externe:Cette solution devrait fonctionner avec votre HTML tel quel, mais ce n'est pas vraiment une réponse très robuste. Si vous modifiez votre
fieldsetmise en page, cela pourrait la casser. Je vous suggère de mettre unclassattribut dans ce div caché, commeclass="majorpointsdetail"et d'utiliser ce code à la place:Obs: il n'y a pas de
</fieldset>balise de fermeture dans votre question, donc je suppose que le div caché est à l'intérieur du fieldset.la source
Si vous avez utilisé le rôle de données réductible, par exemple
puis il fermera le div développé
la source
Consultez la bibliothèque Readmore.js de Jed Foster .
Son utilisation est aussi simple que:
Voici les options disponibles pour configurer votre widget:
L'utilisation peut l'utiliser comme:
J'espère que cela aide.
la source