Développez div cliquez sur

J'ai cherché dans ces forums un moyen de mettre en oeuvre une "jquery élargir la div sur cliquez sur"

J'ai trouvé un moyen simple et idéal tutoriel mais je ne pouvais pas la mettre en œuvre lors de la reinacting le code.

Est ce code valide avec courant de jquery? Je crois que j'ai répliqué la démo exactement, juste des doutes sur le lien vers le script.

Voici le tutoriel, je travaille à partir de la [lien: https://stackoverflow.com/a/20144029/1471333]

[DEMO][2]

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

[link [2]: http://jsfiddle.net/mWcmg/1/]

et voici mon résultat au [lien supprimé], où la démonstration de la ressource de fichier fonctionne, mais mon codage ne s'ouvre pas, pour quelque raison que ce soit. Peut-être que le jquery je lien a changé?

MODIFIER
voici un extrait de code HTML.

<div class="wrapper">
<div class="small">
<p>Lorem..</p>
</div>
<a href="#">Click...</a>
</div>

Andy

  • Où est votre (minimal, MCVE) le HTML?
  • Merci, mais il y a un 'modifier' lien, juste en dessous de votre question de balises; - cliquez sur celle (ou celui qui est ici dans ce commentaire) et ajoutez votre code HTML à votre question (où il peut être lu, contrairement à votre commentaire où il est illisible).
  • désolé, j'ai édité la première question qui se pose maintenant.
  • Alors quel est le problème. Le Code fonctionne comme prévu. Par exemple: jsfiddle.net/mb7jL76k
  • le tutoriel code a fonctionné, mais pas mon codage, le problème a été résolu par courrier, ci-dessous. stackoverflow.com/a/27143926/1471333 merci pour votre réponse
InformationsquelleAutor yesmaybe | 2014-11-26
  1. 1

    Mettre votre code javascript à l'intérieur du document prêt de l'événement. Parce que dans votre exemple, vous exécutez le javascript avant que le DOM est prêt.

    $(document).ready(function()
{
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});
    • c'est elle, fonctionne très bien maintenant. merci pour la réponse rapide, impressionné.
    InformationsquelleAutor haul
  2. 0

    Essayez ceci: jsFiddle

    HTML

    <div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a id="click" href="#">Click...</a>
</div>

    CSS

    .small {
    height: 30px;
    overflow: hidden;
}
.big {
    height: auto;
}

    jQuery

    $('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});
    InformationsquelleAutor kapantzak
  3. 0

    Votre code est correct de sorte que vous pourriez avoir oublié de rendre le document de prêt (onDomready).

    Vous pouvez faire pour mettre ton code entre $(document).ready(function(){...});

    Comme suit: 

    $(document).ready(function(){
    $('.wrapper').find('a[href="#"]').on('click', function (e) {
        e.preventDefault();
        this.expand = !this.expand;
        $(this).text(this.expand?"Click to collapse":"Click to read more");
        $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
    });
});
    • Oui sa droite, JSfiddle par défaut ont la fonction ready où, comme dans le monkeyshrine sa n'a pas l'
    • Pourquoi mon morceau de code n'a pas les couleurs comme dans les autres réponses? Je suis nouveau sur ce site web.
    InformationsquelleAutor Kimmedy
  4. 0

    Aussi longtemps que vous utilisez jQuery, vous pourriez aussi bien profiter des fonctionnalités qu'il propose. Le toggle() méthode vous permet d'afficher/masquer un composant, avec des animations et tout ce qui vous donne. Voici un extrait d'un composant que j'ai écrit qui transforme n'importe quel div que vous spécifiez dans un volet avec une barre de titre:

      CollapsiblePane.prototype.toggle = function( img ){
    var self = this, icon = ( ( self.selector.css( "display" ) === "none" ) ? "collapse" : "expand" );
  self.selector
     .toggle( 'blind', {}, 200, function(  ) {
        $( img ).attr( "src", self.path + "img/" + icon + ".png");
      });
  };

    Si vous voulez voir la totalité du code source, vous pouvez le voir ici: https://github.com/robertdmunn/gadget-ui. Il y a beaucoup plus de choses que vous avez besoin de voir pour illustrer ce que les ailettes (), mais si vous voulez avoir une idée de ce que vous pouvez faire avec jQuery afin de prolonger votre composants de l'INTERFACE utilisateur, prendre un coup d'oeil.

    • cela semble intéressant Robert, avez-vous un lien ou violon où je peux le voir en action?
    • Lien de travail exemple de gadget de l'interface utilisateur, y compris le CollapsiblePane objet: jsfiddle.net/8q4n5z12. Si vous avez Bower installé, vous pouvez simplement 'bower install gadget-ui' pour vérifier le code source et exécuter la page de test en local.
    InformationsquelleAutor Robert Munn