Đặt div để hiển thị: none; sử dụng javascript hoặc jQuery

Question

Tôi có một câu hỏi thực sự nhanh chóng nên là một câu trả lời dễ dàng.

Tôi có trình đơn điều hướng trên thiết bị di động sử dụng các cấp menu của trình đơn thả xuống của jQuery. Mỗi khi một cấp được tải, jQuery xác định chiều cao của trình đơn và đặt nó theo đó.

Tôi đang sử dụng đoạn mã sau vào một nút để bật tắt hiển thị và ẩn các menu chính dựa trên trang hiện tại:

<script type="text/javascript"> 
    (function ($) { 
     $("a.BNnavTrigger").click(function (event) { 
      event.preventDefault(); 
      $("div.drill-down-wrapper").slideToggle("9000"); 
     }); 
    })(jQuery);  
</script> 

Để cho menu để bắt đầu "khép kín" trên các trang nhất định, tôi biết tôi phải cung cấp giá trị css là display:none; cho div chứa. Điều này là tất cả làm việc tốt với một vấn đề nhỏ.

Khi tôi ẩn trình đơn lúc đầu, trình đơn trình đơn thả xuống jQuery phát hiện thấy nó bị ẩn và đặt chiều cao trình đơn thành 0px. Khi tôi chuyển đổi menu trên trang đã ẩn menu ban đầu, tất cả các nội dung khác trong ngăn bật đều chính xác, nhưng chính trình đơn bị kẹt ở độ cao 0.

Trong não, câu trả lời rõ ràng cho vấn đề này là che giấu menu chứa div, qua javascript, sau khi menu đã được tải và thiết lập chiều cao. Điều này có đúng không?

Có ai có thể cung cấp cho tôi một tập lệnh nhỏ để thực hiện việc này không? Tôi là một noob hoàn toàn và hoàn toàn với js. Có ai khác có đề xuất khác về cách xử lý vấn đề này không?

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

CẬP NHẬT!

JS fiddle cho vấn đề ở đây:http://jsfiddle.net/fyyG2/17/ *

Answer 1

On tài liệu sẵn sàng làm $("#yourId").hide();.

Ví dụ:

$(document).ready(function() { 

    $("div.drill-down-wrapper").hide(); 
    var $drillDown = $("#drilldown"); 

     // (what ever your code is) 
}); 

Answer 2

Hãy thử cách này:

$("#yourId").css("display","none"); 

nó nên làm việc đó!

Tôi hy vọng điều đó sẽ hữu ích.

Answer 3

Thêm hiển thị giá trị css: không có tệp css nào hoạt động tốt. http://jsfiddle.net/dxkX6/4/

nhưng tôi có thể thấy rằng bạn có một lỗi đánh máy trong file html của bạn:

$("a.BNnavTrigger").click(function (event) { 
    ^

<a class="BNavTrigger">Toggle Menu</a> 
     ^

là có thể là lý do tại sao bạn đang gặp vấn đề?

Answer 4

Tôi không chắc rằng tôi hoàn toàn hiểu vấn đề của bạn, nhưng đây là một ý nghĩ:

Đặt opacity của những gì bạn muốn ẩn để 0, thay vì thay đổi đó là kích thước/giấu nó.Bằng cách này, nó sẽ giữ cho kích thước của nó nhưng sẽ không được nhìn thấy cho người sử dụng:

$('#id').css('opacity',0); 

Và để lại cho thấy yếu tố:

$('#id').css('opacity',1);