11 Câu hỏi: Làm cách nào tôi có thể mở rộng và thu gọn <div> bằng cách sử dụng javascript?

câu hỏi được tạo ra tại Sun, Jun 5, 2016 12:00 AM

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 thù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. Bản dựng chung như sau:

 49 310

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

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

"$(this) .find ('huyền thoại'). InternalHTML" đang cố gắng vượt qua, trong trường hợp này, "Mở rộng" làm đối số trong hàm.

Đây là javascript:

 49 310

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 nắm bắt được cách hoạt động của javascript.

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

 49 310

Trong phần 49 310.

    
83
  1. Tôi nghĩ rằng những gì bạn đang cố gắng đạt được là một sự kết hợp http://jqueryui.com/accordion/"rel =" nofollow noreferrer " .com /accordion
    2013-07-04 00: 25: 14Z
  2. $đây là tôi đang cố gắng nói "liên quan đến" phần tử HTML mà chức năng được kích hoạt bên trong.
    2013-07-04 00: 28: 28Z
  3. @ hungerpain - Tôi nghĩ rằng người hỏi có thể chưa quen với jQuery và chỉ quên dấu ngoặc đơn khoảng 49 310. Hy vọng điều này sẽ giúp.
    2013-07-04 00: 29: 11Z
  4. Tôi nghĩ bạn nên nghiên cứu thêm về jQuery trước. Rõ ràng bạn không biết nhiều về sự khác biệt giữa jQuery và JavaScript
    2016-01-01 12: 31: 21Z
  5. @ aokaddaoc bạn đã hoàn toàn đúng;)
    2016-06-05 18: 33: 13Z
11 Câu trả lời                              11                         

Đượ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 tại đây
  2. Hoặc, nếu bạn vẫn muốn tự mình làm điều này, bạn có thể xóa 49 310 (dù sao nó 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ư thế này:

 49 310

Với CSS này: (Điều này là để ẩn nội dung 49 310 khi tải trang.

 49 310

Sau đó, bằng cách sử dụng jQuery, hãy viết một sự kiện 49 310 cho tiêu đề.

 49 310

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

    
167
2013-07-04 01: 09: 34Z
  1. + 1 vì điều này sẽ giải quyết vấn đề nếu có nhiều hơn một yếu 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, nên điều này có tỷ lệ tốt.
    2013-07-04 01: 09: 13Z
  2. Bộ trường không bắt buộc. Tôi sẽ thoát khỏi nó và chỉ sử dụng một đường viền. Điều này thật tuyệt vời vì nó chọn div để mở rộng so với tiêu đề tôi đã nhấp, điều này rất quan trọng vì thực tế là tôi có thể có một số lượng mục được liệt kê khác nhau tùy thuộc vào cài đặt của người dùng và các yếu tố khác.
    2013-07-05 03: 45: 34Z
  3. @ Unipartisandev xem xét điều này: jsfiddle.net/hungerpain/476Nq ví dụ đầy đủ :)
    2013-07-05 03: 48: 38Z
  4. Tôi thực sự đánh giá cao sự giúp đỡ. Sẽ có những phần khác của trang web không cần phải sử dụng một chiếc đàn accordion mặc dù điều đặc biệt này là một ví dụ hiển thị tất cả hoặc không có gì. Tôi vẫn đang gặp vấn đề. JQuery của tôi đã lỗi thời và không tải. Điều đó đã được sửa, nhưng tôi vẫn không làm việc được. Tôi đã nhắn tin với nó trong một giờ tốt, tôi sẽ ngủ trên đó. Có lẽ ngày mai nó sẽ đánh tôi.
    2013-07-05 05: 38: 43Z
  5. Tuyệt vời, Cảm ơn. Tiết kiệm rất nhiều thời gian!
    2014-12-09 00: 14: 50Z

làm thế nào về:

jQuery:

 49 310

HTML

 49 310

Fiddle

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

    
19
2016-09-12 23: 40: 06Z
  1. 49 310 sẽ hoạt động như thế nào ở đây?
    2013-07-04 00: 27: 36Z
  2. Xin chào ra86, tôi sẽ tiến thêm một bước này và thực hiện .find trên div bằng cách sử dụng một lớp thay vì id. Nếu người hỏi có một vài trong số các trường này trên trang, anh ta sẽ muốn nhắm mục tiêu người điều khiển cho một trường liên quan đến tập hợp trường cụ thể được nhấp vào. Hi vọng điêu nay co ich! :) Chẳng hạn, bạn có thể sử dụng .closest để lấy tham chiếu đến div cha, sau đó sử dụng .find để xác định vị trí div với class = "hider" thay thế.
    2013-07-04 00: 32: 17Z
  3. Tôi biết là 3 giờ sáng;), nhưng tôi nhận thấy bạn vẫn đang sử dụng id trong jsFiddle của mình. Điều này có thể dẫn đến hành vi không xác định do thông số W3C nói rằng 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 nhiễm hơn với các lỗi hoặc hành vi kỳ quặc, không giải thích được trong các trình duyệt khác. Hy vọng điều này sẽ giúp!
    2013-07-04 01: 13: 15Z
  4. nó thực sự phải là $('. Majorpointlegend'). click (function () {$(this) .parent (). find ('. hider'). chuyển đổi ();}); HOẶC khác khi bất kỳ vị trí nào trong bộ trường được nhấp vào, nó sẽ sụp đổ.
    2017-09-07 18: 57: 52Z

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 thứ nhất, sử dụng phương thức jQuery 49 310:

 49 310

jsFiddle: http://jsfiddle.net/pM3DF/

Một cách khác chỉ đơn giản là sử dụng phương thức jQuery 49 310:

 49 310

jsFiddle: http://jsfiddle.net/Q2wfM/

Tuy nhiên, cách thứ ba là sử dụng phương thức jQuery 49 310 cho phép thực hiện một số hiệu ứng. Chẳng hạn như 49 310 sẽ từ từ hiển thị div ẩn.

    
6
2013-07-04 00: 38: 54Z
  1. Giả sử anh ta có nhiều hơn một trong các yếu tố showMe này trên trang? Hãy nhớ rằng, anh ta đang sử dụng một vòng lặp for để xây dựng một danh sách này, vì vậy, việc nhắm mục tiêu lớp = "showMe" sẽ chỉ ảnh hưởng đến phiên bản đầu tiên của phần tử đó. Đề nghị của tôi là tham chiếu phần tử showMe liên quan đến phần được nhấp. Sau đó, đây sẽ là một giải pháp tốt. Hi vọng điêu nay co ich! :)
    2013-07-04 00: 45: 16Z
  2. Đúng, nhưng anh ấy đang sử dụng vòng lặp để xây dựng danh sách trong một chuỗi gồm 49 310 phần tử, không phải diDù bằng cách nào, anh ta chỉ có thể sử dụng ID phần tử sau đó để ẩn nó.
    2013-07-04 00: 58: 59Z
  3. Bạn đang nghĩ đến các phần phụ và quên rằng sẽ có nhiều hơn những thứ này. Mỗi phần được điền với các phần tử li trong phần phụ . "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 thù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 các phần có thông tin. Trong mỗi phần, có một phần phụ. " nói ngắn gọn, anh ta chỉ chỉ cho bạn thấy một phần, mặc dù sẽ có nhiều hơn.
    2013-07-04 01: 06: 13Z

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/

 49 310     
6
2017-07-06 10: 31: 47Z

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

 49 310

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

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

    
5
2014-01-11 10: 11: 58Z

hãy thử jquery,

 49 310     
3
2013-07-04 00: 34: 23Z

Hãy xem chức năng 49 310 jQuery :

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

Ngoài ra, Hàm 49 310 jQuery là 49 310.

    
3
2015-10-22 07: 23: 57Z
  1. Xin chào, chào mừng bạn đến với Stack Overflow! Bạn nên đưa ra một ví dụ để câu trả lời của bạn đầy đủ hơn. Nếu liên kết bị phá vỡ, câu trả lời của bạn vẫn sẽ hữu ích cho khách truy cập trong tương lai. Chúc may mắn! :)
    2013-07-04 01: 14: 18Z
  2. Bạn có thể chỉnh sửa để thêm ví dụ hoặc thêm nhận xét này dưới dạng nhận xét. Cảm ơn.
    2015-10-21 22: 00: 52Z

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

 49 310

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

 49 310

Quan sát: không có thẻ đóng 49 310 trong câu hỏi của bạn nên tôi giả sử div ẩn nằm trong bộ trường.

    
2
2013-07-04 00: 47: 36Z
  1. Bạn đã đúng. Có một trường đóng cửa, nhưng tôi đã bỏ lỡ nó trong câu hỏi của tôi. Nó xuất hiện ngay sau khi đóng bên trong < /div > và trước khi đóng bên ngoài < /div >
    2013-07-04 01: 05: 01Z

Nếu bạn đã sử dụng đóng mở vai trò dữ liệu, ví dụ:

 49 310

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

 49 310     
1
2016-08-29 10: 00: 00Z

Hãy xem thư viện Readmore.js của Jed Foster.

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

 49 310

Dưới đây là các tùy chọn khả dụng để định cấu hình tiện ích của bạn:

 49 310

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

 49 310

Tôi hy vọng nó có ích.

    
1
2018-09-27 14: 31: 08Z
<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>
nguồn đặt đây