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

95

Ich habe eine Liste auf meiner Website erstellt. Diese Liste wird von einer foreach-Schleife erstellt, die mit Informationen aus meiner Datenbank erstellt wird. Jedes Element ist ein Container mit unterschiedlichen Abschnitten, daher ist dies keine Liste wie 1, 2, 3 ... usw. Ich liste sich wiederholende Abschnitte mit Informationen auf. In jedem Abschnitt gibt es einen Unterabschnitt. Der allgemeine Build lautet 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.

Das "$ (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 mir fast zu 100% sicher, dass mein Problem die 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>

In der <head></head>Sektion.

javascript jquery Ryan Mortensen
quelle

2

Ich denke, was Sie erreichen wollen, ist ein Akkordeon jqueryui.com/accordion

Marc

1

$ Ich versuche, "in Bezug auf" das HTML-Element zu sagen, in dem die Funktion ausgelöst wird.

Ryan Mortensen

1

@hungerpain - Ich denke, der Fragesteller ist möglicherweise neu in jQuery und hat nur die Klammern vergessen $(this). Hoffe das hilft.

jmort253

2

Ich denke, Sie sollten zuerst mehr über jQuery lernen. Anscheinend wissen Sie nicht viel über den Unterschied zwischen jQuery und JavaScript

tom10271

1

@aokaddaoc Sie hatten absolut Recht;)

Ryan Mortensen

181

Okay, Sie haben hier zwei Möglichkeiten:

Verwenden Sie das Akkordeon der jQuery-Benutzeroberfläche - es ist schön, einfach und schnell. Weitere Informationen finden Sie hier
Wenn Sie dies dennoch selbst tun möchten, können Sie das entfernen fieldset(es ist ohnehin nicht semantisch richtig, es dafür zu verwenden) und selbst eine Struktur erstellen.

So machen 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 .contentMaterials beim Laden der Seite.

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

Schreiben Sie dann mit jQuery ein clickEreignis 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/

krishwader
quelle

9

+1, da dies das Problem lösen würde, wenn mehr als ein DIV-Element auf der Seite vorhanden wäre. Mit anderen Worten, da Sie auf den Inhalt innerhalb des angeklickten Headers abzielen, lässt sich dies gut skalieren.

jmort253

2

Die Feldmenge ist nicht zwingend erforderlich. Ich werde es loswerden und nur einen Rand benutzen. Dies ist hervorragend, da das Div ausgewählt wird, das relativ zu der von mir angeklickten Kopfzeile erweitert werden soll. Dies ist wichtig, da ich abhängig von den Benutzereinstellungen und anderen Faktoren möglicherweise mehrere unterschiedliche Anzahlen aufgelisteter Elemente habe.

Ryan Mortensen

1

@Unipartisandev schau dir das an: jsfiddle.net/hungerpain/476Nq vollwertiges Beispiel :)

krishwader

Ich schätze die Hilfe sehr. Es wird andere Teile der Website geben, die zweifellos ein Akkordeon verwenden müssen, obwohl diese eine bestimmte Sache eher ein Beispiel für alles oder nichts ist. Ich habe immer noch Probleme. Meine jQuery war veraltet und wurde nicht geladen. Das ist behoben, aber ich lasse es immer noch nicht funktionieren. Ich habe jetzt eine gute Stunde damit rumgespielt, ich werde darauf schlafen. Vielleicht trifft es mich morgen.

Ryan Mortensen

Wunderbar, danke. Viel Zeit gespart!

Basil Musa

21

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>

Geige

Auf diese Weise binden Sie das Klickereignis an die .majorpointsKlasse und müssen es nicht jedes Mal in den HTML-Code schreiben.

raam86
quelle

Hallo raam86, ich würde noch einen Schritt weiter gehen und eine .find auf dem div mit einer Klasse anstelle einer ID machen. Wenn der Fragesteller mehrere dieser Feldsätze auf der Seite hat, möchte er den Hider auf denjenigen ausrichten, der sich auf den bestimmten Feldsatz bezieht, auf den geklickt wurde. Hoffe das hilft! :) Zum Beispiel könnten Sie .closest verwenden, um einen Verweis auf das übergeordnete div abzurufen, und dann .find verwenden, um das div stattdessen mit einer Klasse = "hider" zu suchen.

jmort253

1

Ich weiß, es ist 3 Uhr morgens;), aber ich habe gerade bemerkt, dass Sie immer noch IDs in Ihrer jsFiddle verwenden. Dies kann zu undefiniertem Verhalten führen, da laut W3C-Spezifikation jede ID eindeutig sein sollte. Wenn Sie den Hider in eine Klasse ändern, ist dies immuner gegen Fehler oder seltsames, ungeklärtes Verhalten in anderen Browsern. Hoffe das hilft!

jmort253

es sollte eigentlich $ ('. majorpointslegend') sein. click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); ODER wenn auf eine beliebige Stelle im Feldsatz geklickt wird, wird sie reduziert.

Awatatah

7

Zunächst einmal verwendet Ihr Javascript nicht einmal jQuery. Es gibt verschiedene Möglichkeiten, dies zu tun. Beispielsweise:

Erster Weg mit der jQuery- toggleMethode:

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

Ein dritter Weg ist die Verwendung der slideToggleMethode von jQuery, die einige Effekte zulässt. So $('#showMe').slideToggle('slow');wird langsam das versteckte Div angezeigt.

Michael Hawkins
quelle

Angenommen, er hat mehr als eines dieser showMe-Elemente auf der Seite? Denken Sie daran, dass er eine for-Schleife verwendet, um eine Liste dieser Elemente zu erstellen. Die Ausrichtung auf class = "showMe" wirkt sich also nur auf die erste Instanz dieses Elements aus. Mein Vorschlag ist, das showMe-Element in Bezug auf das angeklickte zu referenzieren. Dann wäre dies eine gute Lösung. Hoffe das hilft! :)

jmort253

Richtig, aber er verwendet die Schleife, um die Liste in einer Reihe von <li>Elementen zu erstellen , nicht in Divs. In beiden Fällen konnte er die Element-ID nur verwenden, um sie auszublenden.

Michael Hawkins

Sie denken an die Unterabschnitte und vergessen, dass es mehr davon geben wird. Jeder Abschnitt wird mit li-Elementen in einem Unterabschnitt gefüllt . "Diese Liste wird von einer foreach-Schleife erstellt, die mit Informationen aus meiner Datenbank erstellt wird. Jedes Element ist ein Container mit unterschiedlichen Abschnitten. Dies ist also keine Liste wie 1, 2, 3 ... usw. Ich liste sich wiederholende Abschnitte mit Informationen auf In jedem Abschnitt gibt es einen Unterabschnitt. " Kurz gesagt, er hat Ihnen nur einen Abschnitt gezeigt, obwohl es noch mehr geben wird.

jmort253

6

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');
    }
});

David Lin
quelle

5

Vielleicht möchten Sie 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 zwischen Anzeige 'keine' oder 'Block' umschalten.

Originalquelle auf snip2code - So reduzieren Sie ein Div in HTML

Mike Scattoni
quelle

3

versuchen Sie es mit 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");
            }
    }

nmanandhan
quelle

3

Hier gibt es mein Beispiel für eine Animation einer 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>

Geige

Intacto
quelle

3

Schauen Sie sich die toggle() jQuery- Funktion an:

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

Auch innerHTML jQuery- Funktion ist .html().

ist das Liebe
quelle

1

Hallo, willkommen bei Stack Overflow! Sie sollten ein Beispiel zeigen, damit Ihre Antwort vollständiger ist. Wenn der Link unterbrochen wird, ist Ihre Antwort für zukünftige Besucher weiterhin hilfreich. Viel Glück! :)

jmort253

Könnten Sie entweder bearbeiten, um ein Beispiel hinzuzufügen, oder dies als Kommentar hinzufügen. Vielen Dank.

JGallardo

2

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

$(function(){

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

});

Diese Lösung sollte so wie sie ist mit Ihrem HTML funktionieren, ist aber keine wirklich robuste Antwort. Wenn Sie Ihr fieldsetLayout ändern , kann es beschädigt werden. Ich würde vorschlagen, dass Sie ein classAttribut in dieses versteckte Div 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: </fieldset>Ihre Frage enthält kein schließendes Tag, daher gehe ich davon aus, dass sich das versteckte Div innerhalb des Feldsatzes befindet.

Sergiopereira
quelle

Du hast Recht. Es gibt ein abschließendes Feldset, aber ich habe es in meiner Frage verpasst. Es kommt unmittelbar nach dem schließenden inneren </ div> und vor dem schließenden äußeren </ div>

Ryan Mortensen

1

Wenn Sie die zusammenlegbare Datenrolle verwendet haben, z

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

dann wird das erweiterte div geschlossen

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

Atif Hussain
quelle

1

Schauen Sie sich Jed Fosters Readmore.js Bibliothek 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>

Erweitern Sie das Snippet

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() {}
},

Erweitern Sie das Snippet

Verwendung kann es wie folgt verwenden:

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

Erweitern Sie das Snippet

Ich hoffe, es hilft.

Heitor Althmann
quelle

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

Antworten:

jQuery:

HTML

Geige