Définir la hauteur que l'auto sur l'expansion de DIV avec jQuery

Je suis en train de régler la hauteur d'une DIV à l'auto quand je l'étendre, mais lorsque j'ai jamais fais juste de "il se rétrécit vers le bas, ou quand je fais "auto", il ne fait rien. Comment dois-je faire pour modifier la hauteur de l'auto? J'ai les contenus qui seront toutes différentes hauteurs et ne voulez pas avoir à passer en paramètre de hauteur chaque fois que je mets un de ces .C'est ce que j'ai qui ne fonctionne pas correctement. La DIV sera au départ à une hauteur statique puis de l'augmenter ou de les exposer tout le texte dans le DIV.

Mon jsFiddle:
http://jsfiddle.net/gNsrG/

C'est mon jQuery code:

function changeheight(_this) {
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        $('#overviewtext').animate({
            'height': ''
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {

        $('#overviewtext').animate({
            'height': '150px'
        }, 600);

        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }

    return false;
};
  • Double Possible: stackoverflow.com/questions/5003220/...
  • habituellement, ce type de "plus" de la fonction exige la permutation (bascule) 2 divs, avec un petit texte et l'autre avec l'ensemble du texte. juste une idée...
  • ok bien la double question que l'on se réfère à ne pas avoir de réponse
  • En fait, la première réponse ressemble à cela pourrait fonctionner...
  • alors peut-être que vous devriez avoir testé et si elle a fait un travail alors se référer à la réponse n'est pas la question. Très anti-sensibilisation-dupliquer-drapeau.
  • Il semble juste comme une double raison de la question du titre et le code. Pourquoi ne pas le tester et de laisser une réponse ici?
  • mais c'est votre travail pour faire une plus site informatif et moins déroutant comme ceux dev forums.
  • Je l'ai dit en double possible, je n'ai pas dit que c'est un doublon. La troisième réponse, c'est mieux que le premier, par la manière.
  • découvrez mon montage. Je pense qu'il peut travailler pour vous.

InformationsquelleAutor ios85 | 2012-02-06
  1. 4

    Vous ne devriez pas avoir à modifier la hauteur jamais. Vous devez juste être à l'aide de JQuery slidedown et slideup

    J'ai fait quelques changements pour vous exemple sur jsfiddle

    MODIFIER

    J'ai mal compris quelle était la question. Vous voulez un peu de texte à afficher, puis vous cliquez sur plus et plus de texte s'affiche. Cliquez ensuite sur de moins en moins de texte s'affiche. J'ai accompli, mais c'est un très orthodoxe. Apparemment, JQuery ne fonctionne pas bien avec l'animation de l'auto et les pourcentages. En gros est ce que j'ai fait, c'est quand vous cliquez sur plus. J'ai stocké la hauteur actuelle. Temporairement changé d'auto qui le rend totalement ouvert. Obtenu que la hauteur. Changé de retour à fermé (j'espère que l'utilisateur ne voit pas). Puis il a pris cette hauteur et l'a utilisé pour l'animer. J'espère qu'il y a un moyen plus facile, mais pour l'instant je ne peux pas le trouver.

    Mon exemple est ici jsfiddle

    La seule autre façon que je peux penser à accomplir ce qui est à l'intérieur de la div qui contient tous les "PLUS" de texte qui vous slidedown et slideup, mais vous devez être en mesure de différencier la fréquence de coupure a été pour le plus de texte.

    InformationsquelleAutor Henesnarfel
  2. 2

    À l'amélioration du code:

    function changeheight(_this) {
    $('#overviewtext').slideToggle(600); 
    $(_this).text($(_this).text() == 'more' ? 'less' : 'more');
    return false;
};

    Démo ici http://jsfiddle.net/gNsrG/3/

    • Il n'est pas tout à fait faire ce que j'en ai besoin. J'en ai besoin fixée à une hauteur statique pour commencer, puis s'élargit pour exposer tout le texte. Ce fait le contraire et de le réduire à rien.
    InformationsquelleAutor dfsq
  3. 0

    vous pouvez modifier un élément du css à l'aide .css(), dans ce cas, il devrait ressembler à

    $('#overviewtext').css('height', 'auto');

    vous pourriez essayer d'ajouter cette ligne après l'animer appel.

    • Pour ne pas les animer à bien, il vous suffit de vous rendre en hauteur. Pour moi, il ressemble à l'OP veut qu'il soit animé.
    InformationsquelleAutor Will P.
  4. 0

    J'ai eu un problème similaire et ma solution a été d'utiliser JqueryUI qui animent les classes sur le bouton lorsque vous cliquez dans le texte

    jQuery ("#box_description_texts p").click(function() { 
    jQuery(this).toggleClass("box_text_expanded", 250);
});

    et dans le CSS 

    #box_description_texts p.box_text_expanded {height: auto;}
    InformationsquelleAutor Lucas Pretti