Làm thế nào để bắt đầu chuyển đổi jquery của tôi như ẩn?

Tôi có một số mã hiển thị ba hình ảnh và một div tương ứng dưới mỗi hình ảnh. Sử dụng hàm jquery .toggle tôi đã tạo nó để mỗi div sẽ chuyển đổi khi hình ảnh ở trên nó được nhấn. Có cách nào để làm cho nó để các div bắt đầu như ẩn?Làm thế nào để bắt đầu chuyển đổi jquery của tôi như ẩn?

Cảm ơn bạn đã dành thời gian,

mã để tham khảo:

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#picOne").click(function(){ 
$("#one").toggle(250); 


}); 

$("#picTwo").click(function(){ 
    $("#two").toggle(250); 
    }); 


    $("#picThree").click(function(){ 
    $("#three").toggle(250); 
    }); 

}); 
</script> 
</head> 

<body> 


    <center> 
    <h2>Smooth Transitions</h2> 


    <img src="one.png" id="picOne"> 
     <div id="one"> 
     <p>first paragraph.</p> 
     </div> 

    <img src="two.png" id="picTwo"> 

     <div id="two" visibility="hidden"> 
     <p>Second Pair of giraffe.</p> 
     </div> 


    <img src="three.png" id="picThree"> 

     <div id="three"> 
     <p>Thiird paragraph.</p> 
     </div> 



</center> 
</body> 
</html>

Nguồn

2011-12-27 John

visibility là một css tài sản. Nhưng màn hình là những gì bạn muốn trong bất kỳ sự kiện

<div id="two" style="display:none;"> 
    <p>Second Pair of giraffe.</p> 
</div>

Hoặc mương css inline và cung cấp cho mỗi div được toggled một lớp css

<div id="two" class="initiallyHidden">

và sau đó

.initiallyHidden { display: none; }

Và bạn cũng có thể dọn dẹp jQuery một chút. Cho hình ảnh chuyển đổi gây bạn một lớp css

<img src="one.png" class="toggler"> 
    <div> 
    <p>first paragraph.</p> 
    </div>

Và sau đó

$("img.toggler").click(function(){ 
    $(this).next().toggle(250); 
});

này sẽ lọai trừ nhu cầu của bạn cho tất cả những ID, và cũng sẽ làm cho giải pháp này nhiều, có thể mở rộng nhiều hơn nữa.

Và để xử lý nội dung tự động thêm vào, bạn có thể sử dụng on thay vì click

$(document).on("click", "img.toggler", function(){ 
    $(this).next().toggle(250); 
});

(và cho hiệu suất tốt hơn, đảm bảo tất cả những hình ảnh chuyển đổi qua lại là trong một số div container, tên, nói rằng, containerFoo, sau đó làm $("#containerFoo").on thay vì $(document).on(

Nguồn

2011-12-27 18:37:32

Yêu phần làm sạch jQuery của tôi! Để linh hoạt hơn, bạn có thể sử dụng một attr dữ liệu trong trình chuyển đổi, như 'data-toggles-element:" div-id "'. – nitsas

Với css:

#one, #two, #three { display: none; }

Với jQuery

$(function() { //once the document is ready 
    $('h2').nextAll('img') //select all imgs following the h2 
    .find('div') //select all contained divs 
    .hide(); 
})

Bằng cách này, thay vì sử dụng selectors id có lẽ bạn nên sử dụng các lớp

Nguồn

2011-12-27 18:39:55

+1 cho CSS và đề xuất lớp học. – MetalFrog

Chỉ cần thêm style="display: none;" để div. Điều này sẽ bắt đầu lớp div như ẩn.

Khi jQuery chuyển đổi khối, kiểu sau đó sẽ được thay đổi thành chặn

Nguồn

2016-08-20 03:50:21

Làm thế nào để bắt đầu chuyển đổi jquery của tôi như ẩn?

Trả lời

Các vấn đề liên quan