Hiển thị div #id khi nhấp chuột với jQuery

Question

Khi một div được nhấp, tôi muốn div khác xuất hiện.

Do đó, khi '#music' được nhấp, tôi muốn '#musicinfo' xuất hiện.

Đây là css:

#music { 
    float:left; 
    height:25px; 
    margin-left:25px; 
    margin-top:25px; 
    margin-right:80px; 
    font-family: "p22-underground",sans-serif; 
    font-style: normal; 
    font-weight: 500; 
    font-size:13pt; 

    } 

#musicinfo { 
    width:380px; 
    margin:25px; 
    font-family: "p22-underground",sans-serif; 
    font-style: normal; 
    font-weight: 500; 
    font-size:13pt; 
    line-height:1.1; 
    display:none; 

} 

và jquery:

<script type="text/javascript"> 
$("#music").click(function() { 
$("#musicinfo").show("slow"); 
}); 
</script> 

Bất kỳ sự giúp đỡ nào sẽ là tuyệt vời :)

Answer 1

Vấn đề bạn đang gặp phải là sự kiện-xử lý đang bị ràng buộc trước khi các phần tử có mặt trong DOM, nếu bạn quấn jQuery bên trong của một $(document).ready() thì nó sẽ hoạt động hoàn hảo:

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").show("slow"); 
     }); 

    }); 

Cách khác là đặt <script></script> ở chân trang, vì vậy nó được gặp sau khi DOM đã được tải và sẵn sàng.

Để thực hiện div trốn một lần nữa, một khi các yếu tố #music được nhấp, chỉ cần sử dụng toggle():

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").toggle(); 
     }); 
    }); 

JS Fiddle demo.

Và cho phai:

$(document).ready(
    function(){ 
     $("#music").click(function() { 
      $("#musicinfo").fadeToggle(); 
     }); 
    }); 

JS Fiddle demo.

Answer 2

Bạn có thể sử dụng jQuery toggle để hiển thị và ẩn div. Các kịch bản sẽ như thế này

<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery("#music").click(function() { 
     jQuery("#musicinfo").toggle("slow"); 
     }); 
    }); 
</script> 

Answer 3

Đây là cách đơn giản để hiển thị Div sử dụng: -

$("#musicinfo").show(); //or 
$("#musicinfo").css({'display':'block'}); //or 
$("#musicinfo").toggle("slow"); //or 
$("#musicinfo").fadeToggle(); //or