Css hiển thị ẩn div khi nhấp vào codepen

cách duy nhất hiện tại mà tôi đã tìm ra là chuyển đổi các lớp học nhưng điều đó hơi khó hiểu và tôi tin rằng sẽ có cách phù hợp hơn để làm điều đó

Tháng Hai 25, 2017 tại 5. 58 giờ sáng

Shikkediel

người tham gia

Có một cái nhìn tại đây…

viết mã. io/anon/bút/EWaoRM

Tuy nhiên, vẫn chuyển đổi các lớp học, có thể sử dụng hide() và show() sẽ thuận tiện hơn

làm cách nào để thêm một số hiệu ứng chuyển tiếp/hoạt ảnh vào lần nhấp đó?

Chính xác thì hiệu ứng sẽ trông như thế nào sau đó?

Tháng Hai 25, 2017 lúc 8. 01 giờ sáng

Funkaholik

người tham gia

wheeeeee nó hoạt động. ))

nhưng nó chỉ tìm kiếm hiển thị/ẩn lớp trong các phần tử lồng nhau
nếu tôi muốn kiểm soát bất kỳ phần tử nào khác có cùng bong bóng thì sao?

và về hoạt ảnh bạn thấy nó mờ dần nhưng không muốn mờ đi
đây là một ví dụ

Tháng Hai 25, 2017 lúc 8. 41 giờ sáng

Shikkediel

người tham gia

tìm kiếm lớp chỉ hiển thị/ẩn trong các phần tử lồng nhau

Không hoàn toàn đúng, chỉ có phần hide… sau đó thêm bất kỳ phần tử nào với lớp show. Vì vậy, ngay cả khi nó nằm ngoài cha mẹ hiện tại

nếu tôi muốn kiểm soát bất kỳ phần tử nào khác có cùng bong bóng thì sao?

Nói chung, jQuery rất giỏi với điều này nhưng bạn phải cụ thể hơn một chút

Đối với sự mờ dần, có vẻ như điều quan trọng là không sử dụng display: none

Tháng Hai 25, 2017 lúc 9. 07 giờ sáng

Funkaholik

người tham gia

bạn thấy trong ví dụ có một div
làm cách nào để chỉ định bất kỳ nút nào trong số này để điều khiển div?

và hiển thị. không ai;
tất nhiên tôi có thể thay đổi chỉ mục z hoặc ẩn nó ở bên ngoài cửa sổ nhưng hiển thị. không ai;

Tháng Hai 25, 2017 lúc 10. 57 giờ sáng

Shikkediel

người tham gia

Bạn có thể thêm nó bằng một lớp riêng khi hoạt ảnh kết thúc

viết mã. io/anon/bút/JWoZLR

Nhân tiện, một lựa chọn tốt khác là visibility: hidden. Sau đó, nó không thể nhấp được nhưng vẫn chiếm không gian vật lý

làm cách nào để chỉ định bất kỳ nút nào trong số này để điều khiển div?

Mối quan hệ giữa chúng là gì?

Chỉnh sửa - nó không mượt lắm trong mọi trường hợp nhưng tại thời điểm này, việc thực hiện các hoạt ảnh với jQuery cũng có thể trở nên đơn giản hơn. Chuyển đổi lớp và người nghe sự kiện chỉ đi xa

25 Tháng hai, 2017 lúc 12. 08 giờ tối

Funkaholik

người tham gia

đây là cây bút đầu tiên của chúng tôi
tầng lớp. menu_blocks ở đó tìm kiếm các phần tử có lớp. ẩn và thay đổi chúng thành. chỉ

bây giờ chúng ta hãy thực hiện một cuộc cải tổ nhỏ)

đây là một cây bút mới
làm cách nào để tạo hiệu ứng chuyển đổi giống như hiệu ứng đầu tiên nhưng chỉ sử dụng id hoặc ít nhất là không sử dụng cùng một lớp làm bộ chọn ???
vì vậy tôi có thể gán cho một id cụ thể một yếu tố cụ thể trong trang và bằng cách nào đó làm cho chúng liên quan với nhau (có nghĩa là của id)
vì vậy khi một id được bật (hiển thị nội dung liên quan đến nó) các id khác của (nội dung khác bị ẩn)

25 Tháng hai, 2017 lúc 1. 51 giờ chiều

Shikkediel

người tham gia

Đây là một ví dụ dựa trên thứ tự của chúng (nút đầu tiên tương ứng với div đầu tiên, v.v.)

viết mã. io/anon/pen/pevOrp

Nhưng đó là JS nên sẽ có nhiều cách, thậm chí không có lớp nào

viết mã. io/anon/pen/zZxJPM

Nhân tiện, về mặt ngữ nghĩa, chúng là các nút…

Tháng Hai 25, 2017 lúc 2. 31 giờ chiều

Funkaholik

người tham gia

Shikkediel, bạn thực sự làm cho ngày của tôi
cảm ơn nhiều

maaan tôi phải học js =((

P. S. bạn biết điều gì sẽ tuyệt vời hơn không?))
nếu bạn sẽ làm cho chúng ẩn div nếu nhấp vào một khu vực miễn phí
(đối với cả hai ví dụ vì tôi không chắc cái nào dễ xử lý hơn trong tương lai)

26 Tháng hai, 2017 lúc 1. 21 giờ sáng

Shikkediel

người tham gia

Không vấn đề gì. . -)

Đây là cách tiếp cận cơ bản bạn có thể thực hiện cho những gì bạn đã đề cập

$('button, div').click(function(e) {

  e.stopPropagation();
});

$(window).click(function() {

  $('div').removeClass('active');
});

Về cơ bản, nó ẩn các div trên bất kỳ lần nhấp nào, đảm bảo rằng những gì xảy ra trên các nút hoặc div không được "nghe thấy" (chúng không nổi lên). Đã thêm vào cả hai cây bút trước đó

maaan tôi phải học js

Không còn nghi ngờ gì nữa, nó chắc chắn có giá trị

Tháng Hai 26, 2017 lúc 2. 32 giờ sáng

Funkaholik

người tham gia

tôi thực sự đã nghĩ ra một ý tưởng mới rồi)
Bạn có thể thêm phần chuyển tiếp cho nội dung của một nút không?
Giả sử bạn nhấp vào một nút và ví dụ 1 thay đổi thành X (✖)
bạn nhấp vào 2, X lại biến thành 1 và 2 biến thành X. và nếu bạn nhấp vào X, tất cả các div sẽ bị ẩn
và X quay trở lại giá trị ban đầu (1, 2, 3, v.v.). bạn có thể làm điều đó ^_^?

và về js tôi không thể tìm thấy một cách tốt trong khóa học cấp tốc trực tuyến
tôi đã đọc một chút ở đây và ở đó nhưng tất cả đều nhàm chán
Tôi thích học thực hành nhưng với js không giống như html/css, hơi khó thực hiện khi bạn không rành về cú pháp
vì vậy tôi nghĩ rằng tôi phải tham gia các khóa học hoặc lâu hơn. hoặc tôi sẽ làm phiền bạn ở đây mãi mãi =))

Tháng Hai 26, 2017 lúc 3. 24 giờ sáng

Shikkediel

người tham gia

Hãy để tôi xem liệu tôi có thể hiểu chính xác ý của bạn và kết hợp một số thứ lại với nhau không…

Bản thân tôi không thực sự tham gia bất kỳ khóa học nào, chỉ nhảy vào đó và mày mò cho đến khi tôi hiểu những điều cơ bản. Thường được thúc đẩy bằng cách có ý tưởng về những gì tôi muốn tạo (giống như bạn khi tôi xem những gì bạn đã đăng), sau đó là một loạt tìm kiếm cộng với thử và sai. Có thể không phải là cách “đúng” nhưng theo kinh nghiệm của tôi, đó là cách nhanh nhất để học mọi thứ vì bạn đang bận rộn với những gì bạn quan tâm khi bắt đầu