Làm cách nào để mở rộng và thu gọn <div> bằng javascript?

Question 1

Tôi đã tạo một danh sách trên trang web của mình. Danh sách này được tạo bởi một vòng lặp foreach xây dựng với thông tin từ cơ sở dữ liệu của tôi. Mỗi mục là một vùng chứa với các phần khác nhau, vì vậy đây không phải là danh sách như 1, 2, 3 ... vv Tôi đang liệt kê các phần lặp lại với thông tin. Trong mỗi phần, có một tiểu mục. Cách xây dựng chung như sau:

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

Vì vậy, tôi đang cố gắng gọi một hàm với onclick = "majorpointsexpand ($ (this) .find ('legend'). InnerHTML)"

Div mà tôi đang cố gắng thao tác là style = "display: none" theo mặc định và tôi muốn sử dụng javascript để hiển thị nó khi nhấp chuột.

"$ (This) .find ('legend'). InnerHTML" đang cố chuyển, trong trường hợp này, "Mở rộng" làm đối số trong hàm.

Đây là 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";
            }
    }

Tôi gần như chắc chắn 100% vấn đề của mình là cú pháp, và tôi không hiểu nhiều về cách hoạt động của javascript.

Tôi có jQuery được liên kết với tài liệu bằng:

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

Trong <head></head>phần.

Question 2

Được rồi, bạn có hai tùy chọn ở đây:

Sử dụng accordion của jQuery UI - đẹp, dễ dàng và nhanh chóng. Xem thêm thông tin tại đây
Hoặc, nếu bạn vẫn muốn tự mình làm việc này, bạn có thể xóa fieldset(dù sao đi nữa thì cũng không đúng về mặt ngữ nghĩa để sử dụng nó cho việc này) và tự tạo một cấu trúc.

Đây là cách bạn làm điều đó. Tạo cấu trúc HTML như sau:

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

Với CSS này: (Đây là để ẩn .contentnội dung khi trang tải.

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

Sau đó, sử dụng jQuery, viết một clicksự kiện cho tiêu đề.

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

});

Đây là bản demo: http://jsfiddle.net/hungerpain/eK8X5/7/

Question 3

làm thế nào về:

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>

Vĩ cầm

Bằng cách này, bạn đang liên kết sự kiện nhấp chuột với .majorpointslớp mà bạn không phải viết nó trong HTML mỗi lần.

Question 4

Vì vậy, trước hết, Javascript của bạn thậm chí không sử dụng jQuery. Có một số cách để làm điều này. Ví dụ:

Cách đầu tiên, sử dụng togglephương thức 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/

Một cách khác đơn giản là sử dụng showphương thức 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/

Tuy nhiên, cách thứ ba là sử dụng slideTogglephương thức jQuery cho phép tạo ra một số hiệu ứng. Chẳng hạn như $('#showMe').slideToggle('slow');nó sẽ từ từ hiển thị div ẩn.

Question 5

Bạn có thể muốn xem xét phương pháp Javascript đơn giản này được gọi khi nhấp vào liên kết để làm cho bảng điều khiển / div mở rộng hoặc thu gọn.

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

Bạn có thể chuyển ID div và nó sẽ chuyển đổi giữa hiển thị 'không có' hoặc 'khối'.

Nguồn gốc trên snip2code - Cách thu gọn div trong html

Question 6

Nhiều vấn đề ở đây

Tôi đã thiết lập một fiddle phù hợp với bạn: http://jsfiddle.net/w9kSU/

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

Question 7

thử 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");
            }
    }

Question 8

Đây là ví dụ của tôi về hoạt ảnh một danh sách nhân viên với mở rộng mô tả.

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

Vĩ cầm

Question 9

Hãy xem hàm toggle() jQuery :

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

Ngoài ra, hàm innerHTML jQuery là .html().

Question 10

Vì bạn có jQuery trên trang, bạn có thể xóa onclickthuộc tính và majorpointsexpandhàm đó. Thêm tập lệnh sau vào cuối trang của bạn hoặc tốt hơn là vào tệp .js bên ngoài:

$(function(){

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

});

Giải pháp này sẽ hoạt động với HTML của bạn nhưng nó không thực sự là một câu trả lời rất chắc chắn. Nếu bạn thay đổi fieldsetbố cục của mình , nó có thể phá vỡ nó. Tôi khuyên bạn nên đặt một classthuộc tính trong div ẩn đó, giống như class="majorpointsdetail"và sử dụng mã này thay thế:

$(function(){

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

});

Obs: không có </fieldset>thẻ đóng trong câu hỏi của bạn, vì vậy tôi giả sử div ẩn nằm bên trong tập trường.

Question 11

Nếu bạn đã sử dụng vai trò dữ liệu có thể thu gọn, ví dụ:

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

sau đó nó sẽ đóng div mở rộng

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

Question 12

Kiểm tra thư viện Readmore.js của Jed Foster .

Cách sử dụng nó đơn giản như:

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

Mở rộng đoạn mã

Dưới đây là các tùy chọn có sẵn để định cấu hình tiện ích con của bạn:

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

Mở rộng đoạn mã

Sử dụng có thể sử dụng nó như:

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

Mở rộng đoạn mã

Tôi hy vọng nó sẽ giúp.