Câu hỏi Làm cách nào để mở rộng và thu gọn
bằng javascript?


Tôi đã tạo danh sách trên trang web của mình. Danh sách này được tạo ra 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 ... v.v. Tôi liệt kê các phần lặp lại với thông tin. Trong mỗi phần, có một phần phụ. Việc 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)"

Các div tôi cố gắng để thao tác là style = "display: none" theo mặc định, và tôi muốn sử dụng javascript để làm cho nó có thể nhìn thấy trên nhấp chuột.

"$ (This) .find ('legend'). InnerHTML" đang cố gắng 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 tôi là cú pháp, và tôi không nắm bắt được cách javascript hoạt động.

Tôi có jQuery liên kết với tài liệu với:

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

bên trong <head></head> phần.


76
2017-07-04 00:18


gốc


Tôi nghĩ rằng những gì bạn đang cố gắng đạt được là một accordion jqueryui.com/accordion - Marc
$this - Trường hợp nào này đến từ đâu? - krishgopinath
$ này là tôi đang cố gắng nói "liên quan đến" phần tử HTML mà hàm được kích hoạt bên trong. - Ryan Mortensen
@hungerpain - Tôi nghĩ người hỏi có thể mới với jQuery và quên mất dấu ngoặc đơn $(this). Hi vọng điêu nay co ich. - jmort253
Tôi nghĩ bạn nên nghiên cứu thêm về jQuery trước. Dường như bạn không biết nhiều về sự khác biệt giữa jQuery và JavaScript - tom10271


Các câu trả lời:


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

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

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

<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: (Điều này là để ẩn .content khi tải trang.

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

Sau đó, sử dụng jQuery, viết click sự 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 trình diễn: http://jsfiddle.net/hungerpain/eK8X5/7/


152
2017-07-04 00:42



+1 vì điều này sẽ giải quyết được vấn đề nếu có nhiều hơn một phần tử DIV trên trang. Nói cách khác, vì bạn đang nhắm mục tiêu nội dung trong tiêu đề được nhấp, điều này sẽ cân tốt. - jmort253
Các fieldset không phải là bắt buộc. Tôi sẽ loại bỏ nó và chỉ sử dụng một đường viền. Điều này là tuyệt vời vì nó chọn div để mở rộng tương đối với tiêu đề tôi đã nhấp, điều này quan trọng vì thực tế là tôi có thể có một số số khác nhau của các mục được liệt kê tùy thuộc vào cài đặt người dùng và các yếu tố khác. - Ryan Mortensen
@Unipartisandev xem xét điều này: jsfiddle.net/hungerpain/476Nq ví dụ chính thức :) - krishgopinath
Tôi thực sự đánh giá cao sự giúp đỡ. Sẽ có các phần khác của trang web mà chắc chắn sẽ không cần phải sử dụng một accordion mặc dù điều này một trong những điều cụ thể là nhiều hơn một ví dụ hiển thị tất cả hoặc không có gì. Tôi vẫn gặp vấn đề. JQuery của tôi đã lỗi thời và không tải. Đó là cố định, nhưng tôi vẫn không có nó hoạt động. Tôi đã làm hỏng nó cho một giờ tốt bây giờ, tôi sẽ ngủ trên đó. Có lẽ ngày mai nó sẽ đánh tôi. - Ryan Mortensen
Tuyệt vời, cảm ơn. Đã tiết kiệm rất nhiều thời gian! - Basil Musa


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 ràng buộc sự kiện nhấp vào .majorpoints lớp một bạn không phải viết nó trong HTML mỗi lần.


17
2017-07-04 00:25



sẽ như thế nào closest làm việc ở đây? - krishgopinath
Hi raam86, tôi sẽ thực hiện bước này thêm một bước nữa và thực hiện lệnh .find trên div bằng cách sử dụng một lớp thay vì một id. Nếu người hỏi có một vài trong số các fieldets này trên trang, anh ta sẽ muốn nhắm mục tiêu đến hider cho một field có liên quan đến fieldset cụ thể được click vào. Hi vọng điêu nay co ich! :) Ví dụ, bạn có thể sử dụng .closest để có được một tham chiếu đến div cha, sau đó sử dụng .find để xác định vị trí div với một class = "hider" để thay thế. - jmort253
Tôi biết đó là 3 giờ sáng;), nhưng tôi chỉ nhận thấy bạn vẫn đang sử dụng id trong jsFiddle của bạn. Điều này có thể dẫn đến hành vi không xác định vì thông số W3C cho biết mỗi id phải là duy nhất. Nếu bạn thay đổi hider thành một lớp, thì điều này sẽ miễn dịch hơn với các lỗi hoặc hành vi kỳ lạ, không giải thích được trong các trình duyệt khác. Hi vọng điêu nay co ich! - jmort253
nó thực sự phải là $ ('. majorpointslegend'). click (function () {$ (this) .parent (). find ('. hider'). toggle ();}); HOẶC khác khi bất kỳ vị trí nào trong fieldset được nhấp vào, nó sẽ sụp đổ. - Awatatah


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

Cách đầu tiên, sử dụng jQuery toggle phương pháp:

<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 jQuery show phương pháp:

<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 slideToggle phương pháp của jQuery cho phép một số hiệu ứng. Nhu la $('#showMe').slideToggle('slow'); sẽ từ từ hiển thị div ẩn.


6
2017-07-04 00:33



Giả sử anh ta có nhiều hơn một trong số các phần tử showMe này trên trang? Hãy nhớ rằng, anh ấy đang sử dụng vòng lặp for để xây dựng một danh sách các vòng lặp này, vì vậy nhắm mục tiêu class = "showMe" sẽ chỉ ảnh hưởng đến phiên bản đầu tiên của phần tử đó. Đề xuất của tôi là để tham khảo phần tử showMe liên quan đến phần tử được hiển thị. Sau đó, đây sẽ là một giải pháp tốt. Hi vọng điêu nay co ich! :) - jmort253
Đúng, nhưng anh ấy sử dụng vòng lặp để xây dựng danh sách trong một loạt <li> các yếu tố, không phải divs. Dù bằng cách nào, anh ta chỉ có thể sử dụng ID phần tử để ẩn nó. - Mike Hawkins
Bạn đang suy nghĩ của các phần phụ và quên rằng sẽ có nhiều hơn trong số này. Mỗi phần được điền bằng các phần tử li trong một tiểu mục. "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 ... v.v ... Trong mỗi phần, có một phần phụ. " trong ngắn hạn, ông chỉ đơn thuần chỉ cho bạn thấy một phần, mặc dù sẽ có nhiều hơn. - jmort253


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

Tôi đã thiết lập một câu đố 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');
    }
});

6
2017-07-04 00:28





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

3
2017-07-04 00:34





Bạn có thể muốn xem xét phương thức Javascript đơn giản này để được gọi khi nhấp vào liên kết để tạo bảng / 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 màn hình 'không' hoặc 'chặn'.

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


3
2018-01-11 10:11





Ở đây có ví dụ của tôi về hoạt hình một danh sách nhân viên với mở rộng một 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


3
2018-05-20 18:16