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é
636723 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

3voto

isThisLove Points 269

Jetez un coup d'œil à toggle() jQuery fonction :

http://api.jquery.com/toggle/

También, innerHTML jQuery La fonction est .html() .

Répondu el 4 de Juillet, 2013 par isThisLove (269 Points )

Answer 3

3voto

anand kumar Points 84

Essayez jquery,

  <div>
        <a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/>
        <legend class="majorpointslegend">Expand</legend>
        <div id="data" style="display:none" >
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                $('#data').css("display","inherit");
                $(".majorpointslegend").html("Collapse");
            }
        else
            {
                $('#data').css("display","none");
                $(".majorpointslegend").html("Expand");
            }
    }

Répondu el 4 de Juillet, 2013 par anand kumar (84 Points )

Answer 4

3voto

Intacto Points 61

Voici mon exemple d'animation d'une liste de personnel avec extension d'une description.

<html>
  <head>
    <style>
      .staff {            margin:10px 0;}
      .staff-block{       float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
      .staff-title{       font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;}
      .staff-name {       font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
      .staff-name:hover { background-color: silver !important; cursor: pointer;}
      .staff-section {    display:inline-block; padding-left: 10px;}
      .staff-desc {       font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;}
      .staff-desc p {     text-align: justify; margin-top: 5px;}
      .staff-desc img {   margin: 5px 10px 5px 5px; float:left; height: 185px; }
    </style>
  </head>
<body>
<!-- START STAFF SECTION -->
<div class="staff">
  <div class="staff-block">
    <div  class="staff-title">Staff</div>
    <div class="staff-section">
        <div class="staff-name">Maria Beavis</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
        </div>
        <div class="staff-name">Diana Smitt</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
        </div>
        <div class="staff-name">Mike Ford</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
        </div>
    </div>
  </div>

  <div class="staff-block">
    <div  class="staff-title">Technical Advisors</div>
    <div class="staff-section">
        <div class="staff-name">TA Elvira Bett</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p>
        </div>
        <div class="staff-name">TA Sonya Rosman</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p>
        </div>
        <div class="staff-name">TA Tim Herson</div>
        <div class="staff-desc">
          <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Tim joined his father&#8217;s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p>
        </div>
    </div>
  </div>
</div>
<!-- STOP STAFF SECTION -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script language="javascript"><!--
//<![CDATA[
$('.staff-name').hover(function() {
    $(this).toggleClass('hover');
});
var lastItem;
    $('.staff-name').click(function(currentItem) {
        var currentItem = $(this);
      if ($(this).next().height() == 0) {
          $(lastItem).css({'font-weight':'normal'});
          $(lastItem).next().animate({height: '0px'},400,'swing');
          $(this).css({'font-weight':'bold'});
          $(this).next().animate({height: '300px',opacity: 1},400,'swing');
      } else {
          $(this).css({'font-weight':'normal'});
          $(this).next().animate({height: '0px',opacity: 1},400,'swing');
      }
      lastItem = $(this);
    });
//]]>
--></script>

</body></html>

Violon

Répondu el 20 de Mai, 2014 par Intacto (61 Points )

Answer 5

2voto

headsling Points 131

Puisque vous avez jQuery sur la page, vous pouvez le supprimer onclick et l'attribut majorpointsexpand fonction. Ajoutez le script suivant au bas de votre page ou, de préférence, dans un fichier .js externe :

$(function(){

  $('.majorpointslegend').click(function(){
    $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

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 fieldset la disposition, ça pourrait la casser. Je vous suggère de mettre un class dans ce div caché, comme class="majorpointsdetail" et utilisez ce code à la place :

$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

Obs : il n'y a pas de fermeture </fieldset> dans votre question, je suppose donc que la division cachée se trouve à l'intérieur du champ.

Répondu el 4 de Juillet, 2013 par headsling (131 Points )

Answer 6

1voto

Atif Hussain Points 490

Si vous avez utilisé le data-role collapsible, par ex.

    <div id="selector" data-role="collapsible" data-collapsed="true">
    html......
    </div>

puis il fermera le div étendu

    $("#selector").collapsible().collapsible("collapse");

Répondu el 29 de Août, 2016 par Atif Hussain (490 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: