使用默認隱藏在Javascript中的div

希望只是一個快速，我的Javascript知識是不好的想法，我不能工作這一個。使用默認隱藏在Javascript中的div

我有一些Javascript代碼，當點擊一個鏈接時會使聯繫擴展，但是目前默認情況下這個聯繫是可見的，我希望它被隱藏，直到鏈接被點擊，有什麼想法？

$("a.box-toggle").on('click', function() { 
    $('div.box-content').slideToggle(200).toggleClass('active'); 
});

HTML

<section class="box2"> 
<header class="box-head"> 
    <div class="box-title fr"> <span class="box-icon"></span> 

      <h3 class="box-title-text">Title Title</h3> 

    </div> <a class="box-toggle fl active" href="#">A</a> 

</header> 
<div class="box-content active"> 
    <img src="http://carryingthegun.files.wordpress.com/2012/09/personal_trollface_hd.png" alt="" width="200" height="200" />Content or collapsing data goes here</div> 
</section>

CSS

.widget-toggle { 
    display: block; 
    overflow: hidden; 
    text-indent: -9999px; 
    width: 18px; 
    height: 9px; 
    margin-top: 15px; 
    margin-left: 13px; 
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px; 
} 
.widget-toggle.active { 
    background: url(../img/sidebar-arrows.png) no-repeat 0 0; 
}

提前感謝！

來源

2014-03-31 willmadd

爲什麼不使用CSS隱藏它？ – Huangism

使用.hide()您可以在加載頁面時隱藏div內容，並且僅在用戶單擊鏈接時才顯示。
試試這個：

$('div.box-content').hide();  
    $("a.box-toggle").on('click', function() { 
     $('div.box-content').slideToggle(200).toggleClass('active'); 
    });

DEMO1

另一種解決方案是土特產品僅使用CSS，而不在jQuery中使用.hide()這樣的：

.box-content{ 
    display:none; 
}

DEMO2

來源

2014-03-31 14:24:28

用於CSS解決方案。頁面的樣式在DOM準備好之前就已經渲染了，並且在加載jQuery之前WAY。如果用戶的互聯網連接速度很慢，那麼他們很可能會在通過jQuery隱藏之前看到該元素。 –

是的，我更喜歡在這種情況下使用css :) @NateKibler –

你爲什麼不使用.hide()在??的document.ready

$('div.box-content').hide();  
$("a.box-toggle").on('click', function() { 
     $('div.box-content').slideToggle(200).toggleClass('active'); 
    });

來源

2014-03-31 14:24:38

使用.hide（） jQuery中

$(".box-content ").hide();

來源

2014-03-31 14:24:58

你也可以在.box-content CSS添加display:none：

.box-content{ 
    display:none; 
}

來源

2014-03-31 14:26:17

使用默認隱藏在Javascript中的div

回答

相關問題