Comment développer et réduire une <div> à l'aide de javascript ?

Question

Comment développer et réduire une <div> à l'aide de javascript ?

Demandé el 4 de Juillet, 2013: Quand la question a-t-elle été
636722 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai créé une liste sur mon site. Cette liste est créée par une boucle foreach qui construit avec les informations de ma base de données. Chaque élément est un conteneur avec différentes sections, il ne s'agit donc pas d'une liste du type 1, 2, 3... etc. Il s'agit d'une liste de sections répétitives contenant des informations. Dans chaque section, il y a une sous-section. La construction 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>

J'essaie donc d'appeler une fonction avec onclick="majorpointsexpand($(this).find('legend').innerHTML)".

La division que j'essaie de manipuler est style="display:none" par défaut, et je veux utiliser le javascript pour la rendre visible au clic.

Le "$(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 n'ai pas beaucoup de connaissances sur le fonctionnement de javascript.

JQuery est lié au document avec :

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Dans le <head></head> section.

Demandé el 4 de Juillet, 2013 par Ryan Mortensen

Answer 1

5 Réponses

Answer 2

189voto

bundleofjoy Points 7302

Ok, donc vous avez deux options ici :

Utilisez l'accordéon de jQuery UI - c'est agréable, facile et rapide. Voir plus d'informations aquí
Ou, si tu veux toujours le faire par toi-même, tu peux enlever le fieldset (il n'est pas sémantiquement correct de l'utiliser pour cela de toute façon) et créez une structure par vous-même.

Voici comment faire. Créez une structure HTML comme celle-ci :

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

Avec ce CSS : (Ceci est pour cacher le .content quand la page se charge.

.container .content {
    display: none;
    padding : 5px;
}

Puis, à l'aide de jQuery, écrivez un fichier click pour l'en-tête.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Voici une démo : http://jsfiddle.net/hungerpain/eK8X5/7/

Répondu el 4 de Juillet, 2013 par bundleofjoy (7302 Points )

Answer 3

22voto

raam86 Points 3654

Comment :

jQuery :

$('.majorpoints').click(function(){
    $(this).find('.hider').toggle();
});

HTML

<div>
  <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hider" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div>

Violon

De cette façon, vous liez l'événement de clic à l'élément d'information. .majorpoints et vous ne devez pas l'écrire dans le HTML à chaque fois.

Répondu el 4 de Juillet, 2013 par raam86 (3654 Points )

Answer 4

8voto

Mike Scattoni Points 51

Vous voudrez peut-être jeter un coup d'œil à cette méthode Javascript simple qui est invoquée lorsque vous cliquez sur un lien pour étendre ou réduire un panneau/division.

<script language="javascript"> 
function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
} 
</script>

Vous pouvez passer l'ID du div et il basculera entre l'affichage 'none' et 'block'.

Source originale sur snip2code - Comment réduire un div en html

Répondu el 11 de Janvier, 2014 par Mike Scattoni (51 Points )

Answer 5

7voto

DavidLin Points 2883

Beaucoup de problèmes ici

J'ai mis en place un violon qui fonctionne pour vous : http://jsfiddle.net/w9kSU/

$('.majorpointslegend').click(function(){
    if($(this).text()=='Expand'){
        $('#mylist').show();
        $(this).text('Colapse');
    }else{
        $('#mylist').hide();
        $(this).text('Expand');
    }
});

Répondu el 4 de Juillet, 2013 par DavidLin (2883 Points )

Answer 6

7voto

Netizen Points 712

Donc, tout d'abord, votre Javascript n'utilise même pas jQuery. Il y a plusieurs façons de le faire. Par exemple :

La première façon, en utilisant le jQuery toggle méthode :

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>  
    $('.expandContent').click(function(){
        $('.showMe').toggle();
    });
</script>

jsFiddle : http://jsfiddle.net/pM3DF/

Une autre façon de procéder est d'utiliser simplement l'outil jQuery show méthode :

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>

<script>
    $('.expandContent').click(function(){
        $('.showMe').show();
    });
</script>

jsFiddle : http://jsfiddle.net/Q2wfM/

Pourtant, une troisième voie consiste à utiliser le slideToggle de jQuery qui permet d'obtenir certains effets. Par exemple $('#showMe').slideToggle('slow'); qui affichera lentement la div cachée.

Répondu el 4 de Juillet, 2013 par Netizen (712 Points )

Comment développer et réduire une <div> à l'aide de javascript ?

Réponses

jQuery :

HTML

Violon

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment développer et réduire une <div> à l'aide de javascript ?

Réponses

jQuery :

HTML

Violon

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: