Bagaimana cara memperluas dan menciutkan <div> menggunakan javascript?

96

Saya telah membuat daftar di situs saya. Daftar ini dibuat oleh loop foreach yang dibangun dengan informasi dari database saya. Setiap item adalah wadah dengan bagian yang berbeda, jadi ini bukan daftar seperti 1, 2, 3 ... dll. Saya mendaftar bagian berulang dengan informasi. Di setiap bagian, ada sub-bagian. Build umumnya adalah sebagai berikut:

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

Jadi, saya mencoba memanggil fungsi dengan onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"

Div yang saya coba manipulasi adalah style = "display: none" secara default, dan saya ingin menggunakan javascript untuk membuatnya terlihat saat diklik.

The "$ (this) .find ('legend'). InnerHTML" mencoba untuk melewatkan, dalam hal ini, "Perluas" sebagai argumen dalam fungsi.

Ini javascriptnya:

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";
            }
    }

Saya hampir 100% yakin masalah saya adalah sintaks, dan saya tidak memiliki banyak pemahaman tentang cara kerja javascript.

Saya memiliki jQuery yang ditautkan ke dokumen dengan:

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

Di <head></head>bagian tersebut.

javascript jquery Ryan Mortensen
sumber
2
Saya pikir apa yang ingin Anda capai adalah akordeon jqueryui.com/accordion
Marc
1
$ ini adalah saya mencoba untuk mengatakan "dalam kaitannya dengan" elemen HTML yang di dalamnya fungsi dipicu.
Ryan Mortensen
1
@ Hungerpain - Saya pikir penanya mungkin baru mengenal jQuery dan hanya lupa tanda kurung di sekitarnya $(this). Semoga ini membantu.
jmort253
2
Saya pikir Anda harus mempelajari lebih lanjut tentang jQuery terlebih dahulu. Rupanya Anda tidak tahu banyak tentang perbedaan antara jQuery dan JavaScript
tom10271
1
@aokaddaoc Anda benar sekali;)
Ryan Mortensen

Jawaban:

184

Oke, jadi Anda punya dua opsi di sini:

  1. Gunakan akordeon jQuery UI - bagus, mudah, dan cepat. Lihat info selengkapnya di sini
  2. Atau, jika Anda masih ingin melakukannya sendiri, Anda dapat menghapus fieldset(secara semantik tidak benar menggunakannya untuk ini) dan membuat struktur sendiri.

Berikut cara melakukannya. Buat struktur HTML seperti ini:

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

Dengan CSS ini: (Ini untuk menyembunyikan .contentbarang saat halaman dimuat.

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

Kemudian, dengan menggunakan jQuery, tulis clickacara untuk 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";
        });
    });

});

Berikut demo nya: http://jsfiddle.net/hungerpain/eK8X5/7/

krishwader
sumber
9
+1 karena ini akan menyelesaikan masalah jika ada lebih dari satu elemen DIV pada halaman. Dengan kata lain, karena Anda menargetkan konten dalam tajuk yang diklik, ini berskala dengan baik.
jmort253
2
Fieldset tidak penting. Saya akan menyingkirkannya dan hanya menggunakan perbatasan. Ini sangat bagus karena memilih div untuk diperluas relatif terhadap tajuk yang telah saya klik, yang penting karena fakta bahwa saya mungkin memiliki beberapa jumlah item terdaftar yang berbeda tergantung pada pengaturan pengguna dan faktor lainnya.
Ryan Mortensen
1
@Unipartisandev lihat ini: jsfiddle.net/hungerpain/476Nq contoh lengkap :)
krishwader
Saya sangat menghargai bantuannya. Akan ada bagian lain dari situs yang tidak diragukan lagi perlu menggunakan akordeon meskipun hal ini lebih merupakan contoh tampilan semua atau tidak sama sekali. Saya masih mengalami masalah. JQuery saya sudah usang dan tidak memuat. Itu sudah diperbaiki, tapi saya masih belum membuatnya berfungsi. Saya sudah mengacaukannya selama satu jam sekarang, saya akan tidur di atasnya. Mungkin besok aku akan tersadar.
Ryan Mortensen
Luar biasa, Terima kasih. Menghemat banyak waktu!
Basil Musa
21

bagaimana tentang:

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>

Biola

Dengan cara ini Anda mengikat event click ke .majorpointskelas dan Anda tidak perlu menuliskannya di HTML setiap saat.

raam86
sumber
Hai raam86, saya akan mengambil langkah lebih jauh dan melakukan. Temukan div menggunakan kelas, bukan id. Jika penanya memiliki beberapa kumpulan bidang ini di halaman, dia akan ingin menargetkan penyembunyi untuk bidang yang terkait dengan kumpulan bidang tertentu yang diklik. Semoga ini membantu! :) Misalnya, Anda bisa menggunakan .closest untuk mendapatkan referensi ke div induk, lalu gunakan .find untuk mencari div dengan class = "hider" sebagai gantinya.
jmort253
1
Saya tahu ini jam 3 pagi;), tapi saya baru tahu Anda masih menggunakan id di jsFiddle Anda. Ini dapat mengakibatkan perilaku tidak terdefinisi karena spesifikasi W3C mengatakan setiap id harus unik. Jika Anda mengubah penyembunyi menjadi kelas, ini akan lebih kebal terhadap bug atau perilaku aneh yang tidak dapat dijelaskan di browser lain. Semoga ini membantu!
jmort253
seharusnya $ ('. majorpointslegend'). click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); ATAU jika ada tempat di fieldset diklik, itu akan runtuh.
Awatatah
7

Jadi, pertama-tama, Javascript Anda bahkan tidak menggunakan jQuery. Ada beberapa cara untuk melakukan ini. Sebagai contoh:

Cara pertama, menggunakan togglemetode jQuery :

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

Cara lain adalah dengan menggunakan showmetode jQuery :

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

Namun cara ketiga adalah menggunakan slideTogglemetode jQuery yang memungkinkan beberapa efek. Seperti $('#showMe').slideToggle('slow');yang secara perlahan akan menampilkan div tersembunyi.

Michael Hawkins
sumber
Misalkan dia memiliki lebih dari satu elemen showMe ini di halaman? Ingat, dia menggunakan perulangan for untuk membuat daftar ini, jadi penargetan class = "showMe" hanya akan memengaruhi contoh pertama elemen itu. Saran saya adalah mereferensikan elemen showMe sehubungan dengan yang diklik. Maka ini akan menjadi solusi yang bagus. Semoga ini membantu! :)
jmort253
Benar, tapi dia menggunakan loop untuk membangun daftar dalam serangkaian <li>elemen, bukan div. Apa pun itu, dia bisa menggunakan ID elemen lalu menyembunyikannya.
Michael Hawkins
Anda memikirkan subbagian dan lupa bahwa akan ada lebih banyak lagi. Setiap bagian diisi dengan elemen li dalam subbagian . "Daftar ini dibuat oleh foreach loop yang dibangun dengan informasi dari database saya. Setiap item adalah wadah dengan bagian yang berbeda, jadi ini bukan daftar seperti 1, 2, 3 ... dll. Saya membuat daftar bagian berulang dengan informasi . Di setiap bagian, ada sub-bagian. " Singkatnya, dia hanya menunjukkan satu bagian saja, padahal akan ada lebih banyak.
jmort253
6

Anda mungkin ingin melihat metode Javascript sederhana ini untuk dipanggil saat mengklik link untuk membuat panel / div meluas atau diciutkan.

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

Anda dapat meneruskan ID div dan itu akan beralih antara tampilan 'tidak ada' atau 'blok'.

Sumber asli di snip2code - Cara menutup div di html

Mike Scattoni
sumber
6

Banyak masalah disini

Saya telah menyiapkan biola yang cocok untuk Anda: http://jsfiddle.net/w9kSU/

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

coba 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
sumber
3

Di sini ada contoh animasi daftar staf saya dengan memperluas deskripsi.

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

Biola

Intacto
sumber
3

Lihatlah toggle() jQuery fungsi :

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

Juga, Fungsi innerHTML jQuery adalah .html().

Apakah ini cinta
sumber
1
Halo, selamat datang di Stack Overflow! Anda harus menunjukkan contoh agar jawaban Anda lebih lengkap. Jika tautannya rusak, jawaban Anda akan tetap berguna bagi pengunjung di masa mendatang. Semoga berhasil! :)
jmort253
Bisakah Anda mengedit untuk menambahkan contoh atau menambahkan ini sebagai komentar. Terima kasih.
JGallardo
2

Karena Anda memiliki jQuery di halaman tersebut, Anda dapat menghapus onclickatribut dan majorpointsexpandfungsinya. Tambahkan skrip berikut ke bagian bawah halaman Anda atau, sebaiknya, ke file .js eksternal:

$(function(){

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

});

Solusi ini harus bekerja dengan HTML Anda apa adanya, tetapi ini bukan jawaban yang sangat kuat. Jika Anda mengubah fieldsettata letak Anda , itu bisa merusaknya. Saya menyarankan agar Anda meletakkan fileclass atribut di div tersembunyi itu, seperti class="majorpointsdetail"dan menggunakan kode ini sebagai gantinya:

$(function(){

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

});

Obs: tidak ada </fieldset>tag penutup dalam pertanyaan Anda jadi saya berasumsi div tersembunyi ada di dalam fieldset.

sergiopereira.dll
sumber
Kamu benar. Ada fieldset penutup, tapi saya melewatkannya dalam pertanyaan saya. Itu datang segera setelah bagian dalam penutupan </div> dan sebelum bagian luar penutupan </div>
Ryan Mortensen
1

Jika Anda menggunakan peran data, mis

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

maka div yang diperluas akan ditutup

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

Lihat perpustakaan Readmore.js Jed Foster .

Penggunaannya sesederhana:

$(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>
Luaskan cuplikan

Berikut adalah opsi yang tersedia untuk mengonfigurasi widget Anda:

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

Gunakan dapat menggunakannya seperti:

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

Saya harap ini membantu.

Heitor Althmann
sumber