it-swarm.com.de

Wie kann ich ein <div> mit Javascript erweitern und reduzieren?

Ich habe auf meiner Website eine Liste erstellt. Diese Liste wird von einer foreach-Schleife erstellt, die Informationen aus meiner Datenbank enthält. Jedes Element ist ein Container mit unterschiedlichen Abschnitten. Es handelt sich also nicht um eine Liste wie 1, 2, 3 ... usw.. In jedem Abschnitt gibt es einen Unterabschnitt. Der allgemeine Aufbau ist wie folgt:

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

Ich versuche also eine Funktion mit onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML) aufzurufen."

Das Div, das ich zu manipulieren versuche, ist standardmäßig style = "display: none", und ich möchte Javascript verwenden, um es beim Klicken sichtbar zu machen.

Die "$ (this) .find ('legend'). InnerHTML" versucht in diesem Fall "Expand" als Argument in der Funktion zu übergeben.

Hier ist das 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";
            }
    }

Ich bin fast zu 100% sicher, dass mein Problem Syntax ist, und ich habe nicht viel Verständnis dafür, wie Javascript funktioniert.

Ich habe jQuery mit dem Dokument verknüpft mit:

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

Im Abschnitt <head></head>.

78
Ryan Mortensen

Okay, du hast hier zwei Möglichkeiten:

  1. Verwenden Sie das Akkordeon von jQuery UI - es ist nett, einfach und schnell. Mehr Infos hier
  2. Wenn Sie dies dennoch selbst tun möchten, können Sie die fieldset entfernen (es ist nicht semantisch berechtigt, es trotzdem zu verwenden) und eine Struktur selbst erstellen.

So tun Sie das. Erstellen Sie eine HTML-Struktur wie folgt:

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

Mit diesem CSS: (Dies dient zum Ausblenden des .content-Zeugs beim Laden der Seite.).

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

Schreiben Sie dann mit jQuery ein click-Ereignis für den Header.

$(".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";
        });
    });

});

Hier ist eine Demo: http://jsfiddle.net/hungerpain/eK8X5/7/

160
krishgopinath

wie wäre es mit:

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>

Fiddle

Auf diese Weise binden Sie das click -Ereignis an die .majorpoints-Klasse, und Sie müssen es nicht jedes Mal in HTML schreiben.

18
raam86

Viele Probleme hier

Ich habe eine Geige eingerichtet, die für Sie funktioniert: http://jsfiddle.net/w9kSU/

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

Ihr Javascript verwendet also nicht einmal jQuery. Dafür gibt es mehrere Möglichkeiten. Zum Beispiel:

Verwenden Sie die jQuery-Methode toggle:

<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/

Eine andere Möglichkeit besteht darin, einfach die jQuery-Methode show zu verwenden:

<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/

Eine dritte Möglichkeit ist die Verwendung der slideToggle-Methode von jQuery, die einige Effekte zulässt. Wie $('#showMe').slideToggle('slow');, die langsam das verborgene div anzeigt.

6
Mike Hawkins

Sie können einen Blick auf diese einfache Javascript-Methode werfen, die aufgerufen wird, wenn Sie auf einen Link klicken, um ein Panel/Div zu erweitern oder zu reduzieren.

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

Sie können die Div-ID übergeben und es wird zwischen "Keine" und "Block" umgeschaltet.

Originalquelle von snip2code - Wie ein div in html zu reduzieren

5
Mike Scattoni

Hier gibt es mein Beispiel einer Animation, eine Mitarbeiterliste mit einer Beschreibung erweitern.

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

Fiddle

3
Intacto

Schauen Sie sich die Funktion toggle()jQuery an: 

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

innerHTMLjQuery -Funktion ist .html().

3
isThisLove

versuchen sie 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");
            }
    }
3
anand kumar

Da Sie jQuery auf der Seite haben, können Sie das onclick-Attribut und die majorpointsexpand-Funktion entfernen. Fügen Sie das folgende Skript am Ende Ihrer Seite oder vorzugsweise in einer externen JS-Datei hinzu:

$(function(){

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

});

Diese Lösung sollte mit Ihrem HTML-Code funktionieren, ist aber keine wirklich robuste Antwort. Wenn Sie Ihr fieldset-Layout ändern, kann dies zu einem Bruch führen. Ich würde vorschlagen, dass Sie ein class-Attribut in dieses versteckte div wie class="majorpointsdetail" einfügen und stattdessen diesen Code verwenden:

$(function(){

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

});

Obs: Es gibt kein schließendes </fieldset>-Tag in Ihrer Frage, also gehe ich davon aus, dass das versteckte div im Feldset liegt.

2
sergiopereira

Wenn Sie die Datenrolle minimiert haben, z.

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

dann wird das erweiterte div geschlossen

    $("#selector").collapsible().collapsible("collapse");   
1
Atif Hussain

Schauen Sie sich die Readmore.js -Bibliothek von Jed Foster an.

Die Verwendung ist so einfach wie:

$(document).ready(function() {
  $('article').readmore({collapsedHeight: 100});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script>

<article>
  <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and Explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>

  <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>

  <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
</article>

Hier sind die verfügbaren Optionen zum Konfigurieren Ihres Widgets:

{
  speed: 100,
  collapsedHeight: 200,
  heightMargin: 16,
  moreLink: '<a href="#">Read More</a>',
  lessLink: '<a href="#">Close</a>',
  embedCSS: true,
  blockCSS: 'display: block; width: 100%;',
  startOpen: false,

  // callbacks
  blockProcessed: function() {},
  beforeToggle: function() {},
  afterToggle: function() {}
},

Verwendung kann es wie folgt verwenden:

$('article').readmore({
  collapsedHeight: 100,
  moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});

Ich hoffe, es hilft.

0
Heitor Althmann