Chiều cao tối đa của CSS accordion

Kể từ khi cập nhật plugin Essential Blocks ngày hôm qua, nội dung mục đàn accordion – khi tiêu đề đàn accordion được nhấp vào – bị giới hạn ở chiều cao tối đa 1000 pixel theo kiểu nội tuyến. Nó hoạt động hoàn hảo ngay trước đó, ngay cả với nội dung rất dài

Trong trình kiểm tra Firefox, tôi đã tìm thấy HTML sau
<div class="eb-accordion-content-wrapper" style="max-height: 1000px;">

Tôi đã cố ghi đè kiểu nội tuyến này bằng cách cập nhật 'eb-accordion-content-wrapper' theo kiểu chủ đề con của tôi. css với các chiều cao pixel khác nhau, “không có” hoặc “kế thừa” và thậm chí là “tự động”, nhưng sau đó tất cả các mục đàn accordion trên trang đều được mở cùng một lúc và không được hiển thị riêng lẻ khi tiêu đề đàn accordion được nhấp vào

Bất kỳ đề xuất nào để vượt qua vấn đề này sẽ được đánh giá rất cao

Trang tôi cần trợ giúp. [đăng nhập để thấy link]

Đang xem 7 trả lời - 1 đến 7 (trong tổng số 7)

  • Trình bắt đầu chủ đề tigmewp

    (@tigmewp)

    đội chào mừng

    Cảm ơn bạn đã cập nhật ngày hôm qua, nhưng tiếc là vấn đề trên vẫn còn tồn tại

    Đối với những người gặp vấn đề tương tự, đây là cách giải quyết CSS tạm thời mà tôi đã thêm vào kiểu của chủ đề con. tập tin css

    
    .eb-accordion-content-wrapper[style^="max-height: 1000px"] {
    	max-height: 4000px !important;
    }
    

    Hỗ trợ plugin Mahbub Shovan

    (@mahbubshovan)

    Xin chào @tigmewp

    Tôi hy vọng bạn đang làm tốt. Xin lỗi vì trả lời chậm. Nhóm nhà phát triển của chúng tôi đã làm việc với nó. Cảm ơn rất nhiều cho các chi tiết

    Tôi sẽ thông báo cho bạn về một bản cập nhật khác sau khi sự cố được khắc phục;

    Cảm ơn
    Chúc một ngày tốt lành

    Trình bắt đầu chủ đề tigmewp

    (@tigmewp)

    Xin chào @mahbubshovan

    Tôi đang làm rất tốt, cảm ơn bạn, và hy vọng bạn cũng vậy?

    Cảm ơn bạn đã xem xét vấn đề này. Giải pháp thay thế CSS đang hoạt động khá tốt, vì vậy tôi không vội vàng vào lúc này

    Tận hưởng một ngày đầy kỳ diệu quá

    Hỗ trợ plugin Mahbub Shovan

    (@mahbubshovan)

    Xin chào @tigmewp

    Tôi hy vọng bạn đang làm tốt ngày hôm nay. Cảm ơn rất nhiều cho cập nhật của bạn. Chúng tôi đã khắc phục sự cố và sẽ phát hành phiên bản mới với bản sửa lỗi sớm nhất có thể
    Tôi sẽ thông báo cho bạn về một bản cập nhật khác sau khi bản phát hành có bản sửa lỗi, đừng lo lắng

    Cảm ơn
    Chúc một ngày tốt lành

    Trình bắt đầu chủ đề tigmewp

    (@tigmewp)

    Xin chào @mahbubshovan

    Tôi rất khỏe, cảm ơn bạn và hy vọng bạn cũng vậy?

    Cảm ơn bạn vì tất cả những nỗ lực của bạn và một plugin tuyệt vời. Tôi đang mong chờ bản cập nhật mới

    Chúc bạn có một ngày làm việc hiệu quả và vui vẻ

    Hỗ trợ plugin Mahbub Shovan

    (@mahbubshovan)

    Xin chào @tigmewp

    Tôi hy vọng bạn đang làm tốt. Hôm nay chúng tôi đã phát hành một phiên bản mới (3. 8. 3) của plugin đã khắc phục sự cố bạn đã đề cập. Tôi đang yêu cầu bạn, vui lòng cập nhật thông tin của bạn và cho tôi biết mọi việc diễn ra như thế nào

    Tôi đang chờ phản hồi có giá trị của bạn
    Chúc một ngày tốt lành

    Trình bắt đầu chủ đề tigmewp

    (@tigmewp)

    Xin chào @mahbubshovan

    Tôi đang làm rất tốt, còn bạn?

    Cảm ơn bạn đã quan tâm đến vấn đề này. Tôi đã cài đặt bản cập nhật của bạn và nó thực sự đã khắc phục được sự cố. Đàn accordion lại hoạt động như một bùa mê

    Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

    Phần 2

    Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

    Phần 3

    Lorem ipsum dolor sit amet, consectetur adipisizing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercite ullamcolaboris nisi ut aliquip ex ea commodo do đó

    Tự mình thử »


    Tạo một chiếc đàn accordion

    Bước 1) Thêm HTML

    Thí dụ

    Phần 1

    Lorem ipsum


    Phần 2

    Lorem ipsum


    Phần 3

    Lorem ipsum



    Bước 2) Thêm CSS

    Phong cách đàn accordion

    Thí dụ

    /* Tạo kiểu cho các nút được sử dụng để mở và đóng bảng đàn accordion */
    đàn xếp {
    màu nền. #eee;
    màu. #444;
    con trỏ. con trỏ;
    đệm. 18px;
    bề rộng. 100%;
    căn chỉnh văn bản. bên trái;
    biên giới. không ai;
    đề cương. không ai;
    chuyển tiếp. 0. 4s;
    }

    /* Thêm màu nền cho nút nếu nó được nhấp vào (thêm. active với JS) và khi bạn di chuột qua nó (hover) */
    tích cực,. đàn phong cầm. bay lượn {
    màu nền. #ccc;
    }

    /* Tạo kiểu cho bảng đàn accordion. Ghi chú. ẩn theo mặc định */
    bảng điều khiển {
    đệm. 0 18px;
    màu nền. trắng;
    trưng bày. không ai;
    tràn ra. ẩn giấu;
    }



    Bước 3) Thêm JavaScript

    Thí dụ

    var acc = tài liệu. getElementsByClassName("accordion");
    tôi;

    cho (i = 0; i < acc. chiều dài;
    tài khoản [i]. addEventListener("click", function() {
    /* Chuyển đổi giữa việc thêm và xóa lớp "đang hoạt động",
    để đánh dấu nút điều khiển bảng điều khiển */
    cái này. danh sách lớp học. chuyển đổi ("hoạt động");

    /* Chuyển đổi giữa ẩn và hiển thị bảng điều khiển đang hoạt động */
    bảng điều khiển var = cái này. nextElementSibling;
    nếu (bảng. Phong cách. hiển thị === "khối") {
    bảng điều khiển. Phong cách. hiển thị = "không";
    } khác {
    bảng điều khiển. Phong cách. hiển thị = "khối";
    }
    });
    }

    Tự mình thử »


    Đàn accordion hoạt hình (Trượt xuống)

    Để tạo một chiếc đàn accordion hoạt hình, hãy thêm max-height: 0, overflow: hidden và một transition cho thuộc tính chiều cao tối đa, vào lớp panel

    Sau đó, sử dụng JavaScript để trượt nội dung xuống bằng cách đặt max-height được tính toán, tùy thuộc vào chiều cao của bảng điều khiển trên các kích thước màn hình khác nhau

    Chiều cao có thể được chuyển đổi trong CSS không?

    Nó hoạt động như thế này. Các giá trị CSS chỉ có thể được chuyển đổi sang và từ các giá trị đơn vị cố định . Nhưng hãy tưởng tượng chúng ta có một phần tử có chiều cao được đặt thành auto nhưng chiều cao tối đa của nó được đặt thành giá trị cố định; . Chúng tôi không thể chuyển đổi height , nhưng chúng tôi có thể chuyển đổi max-height , vì nó có giá trị rõ ràng.

    Bạn có thể tạo đàn accordion mà không cần Javascript không?

    Để tạo đàn accordion trong HTML, người dùng có thể sử dụng phần tử chi tiết HTML5 . Chúng tôi có thể tạo một chiếc đàn accordion tốt bằng cách sử dụng yếu tố chi tiết và CSS tối thiểu. Trong đoạn mã trên, chúng tôi đã sử dụng phần tử chi tiết HTML, trong đó thẻ tóm tắt được sử dụng để hiển thị tiêu đề và thẻ chi tiết để hiển thị nội dung của Accordion.