Je ne sais donc rien de jQuery - mais je jure que j'essaie d'apprendre. Le truc, c'est que j'ai du code qui fonctionne - mais je sais que c'est répétitif et probablement pas casher pour un vrai programmeur - c'est pourquoi je me suis tourné vers vous tous.

Donc, ce que je veux faire, c'est afficher / masquer (ou basculer - ce que vous pensez être le mieux) quelques divs d'information, ou alors vous pouvez les appeler, sur cette page: Cliquez pour un codage jQuery assez mauvais!

Quoi qu'il en soit, le code show / hide que j'ai en ce moment se présente comme suit:

    $(document).ready(function(){

    $('#meet_growlab, #buddy_tv').hide();

    $('a#growlab').click(function(){
    $('#meet_growlab').show('slow');
});

    $('a#growlab_close').click(function(){
    $('#meet_growlab').hide('slow');
})

    $('a#buddytv').click(function(){
    $('#buddy_tv').show('slow');
});

    $('a#buddytv_close').click(function(){
    $('#buddy_tv').hide('slow');
})


});

Avec le HTML étant (enfin l'essentiel étant ...):

<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#" id="growlab_close">Close</a></p>
</div>

<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#" id="buddytv_close">Close</a></p>
</div>

<ul>
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

Alors oui - ça marche, mais ce n'est pas joli. Et je sais que vous pouvez m'aider à la rendre jolie, alors ... voulez-vous?

3
Connie 25 oct. 2011 à 11:20

3 réponses

Meilleure réponse

Vous pouvez faire en sorte que votre contenu glisse de haut en bas en utilisant la fonction slideToggle, ainsi qu'en utilisant le bouton "Fermer" fourni. Voici à quoi cela ressemblerait:

HTML

<div id="meet_growlab" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li><a href="#" class="open" rel="#meet_growlab">
        Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)
    </a></li>
    <li><a href="#" class="open" rel="#buddy_tv">
        Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
    </a></li>
</ul>

jQuery

$('.content').hide();

$('.open').click(function(){
    var section = $(this).attr('rel');
    $(section).slideToggle();
});

$('.close').click(function(){
    $(this).parents('.content').slideUp();
});

Voir l'exemple ici: http://jsfiddle.net/pXh37/

De cette façon, vous pouvez ajouter des sections supplémentaires de contenu plus tard sans modifier le code jQuery. Il y a un assez bon article à ce sujet ici:

http://www.ben-holland.co.uk/blog/coding/keeping-things-simple-and-generic-in-jquery/

1
hollandben 25 oct. 2011 à 09:39

Eh bien, il y a ce comportement ennuyeux où la fenêtre est modifiée lorsque le lien est cliqué. Vous pouvez utiliser "return false;" pour résoudre ce problème; par exemple.

$('a#buddytv_close').click(function() {
    // Do whatever.

    return false;
}

JE PENSE que vous devez basculer entre afficher / cacher. Ce n'est pas vraiment nécessaire pour tout ce balisage, jQuery peut le faire pour vous; par exemple. http://jsfiddle.net/wzdTL/. Dans la fenêtre "Sortie" - en bas à droite - vous pouvez cliquer pour basculer entre afficher et masquer le contenu.

Le "retour faux" pour le bit JS est d'arrêter la propagation des événements, car l'hyperlien n'est pas vraiment un hyperlien en soi - d'où le changement de fenêtre discordante, au moins dans Firefox / 7.0.1 - mais juste pour appeler toggle () , nous pouvons donc simplement retourner false.

1
Wayne 25 oct. 2011 à 08:17

Vous pouvez utiliser l'attribut rel comme lien vers la div. La fonctionnalité de fermeture peut être plus facile à écrire, voir l'exemple: http://jsfiddle.net/mikhailov/Ra4Ad/

JS

$('#growlab, #buddytv').click(function() {
    var obj = $(this).attr('rel');
    $(obj).show('slow');
    return false
});

$('.close').click(function() {
    $(this).parents('div').hide('slow')
    return false
})

HTML

<div id="meet_growlab">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li>
        <a href="#" id="growlab" rel="#meet_growlab">
            Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver 
            (June 24, 2011)
        </a>
    </li>
    <li>
        <a href="#" id="buddytv" rel="#buddy_tv">
            Building the Web's Best Entertainment-Based Community Site: 
            Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
        </a>
    </li>
</ul>
1
Anatoly 25 oct. 2011 à 07:54