試圖切換一個點擊容器

我想讓每個單擊偶處理程序時，div容器展開和合同。但是，每次我加載頁面時，我必須點擊偶數處理程序兩次才能第一次展開它，之後它只需點擊一下，但我只想點擊一次，以便在頁面重新加載時進行擴展。試圖切換一個點擊容器

CSS：

#bodywrap1{ 
border-radius: 5px; 
height: 00px ; 
width: 80% ; 
overflow: hidden; 
border-top: solid 2px rgba(0,0,0,0.3) ; 
border-bottom: solid 2px rgba(0,0,0,0.3) ;

的Javascript：

HTML：

<h2 onclick = "expand()" id = "expandv">Expand</h2>

下面是該網站即時通訊工作，並專門頁面。 http://hourtimeagent.com/html/c++.php

來源

2014-01-13 Bryan Fajardo

切換工作基礎上的顯示屬性，所以設置display: none到bodywrap1

當第一次點擊發生，因爲沒有設置顯示，而不是顯示元素toggle()隱藏它，以解決它集

#bodywrap1 { 
    border-radius: 5px; 
    height: 0; 
    width: 80%; 
    overflow: hidden; 
    border-top: solid 2px rgba(0, 0, 0, 0.3); 
    border-bottom: solid 2px rgba(0, 0, 0, 0.3); 
    /*new property*/ 
    display: none; 
}

來源

2014-01-13 02:17:09

謝謝你，在回顧所有答案後，我認爲你是最好的，因爲它的簡單性，因爲我不得不再寫一行代碼。謝謝！ –

它需要兩次點擊的原因是因爲.toggle隱藏了＃bodywrap1，然後再次點擊它顯示＃bodywrap1併爲高度設置動畫。

我用.toggleClass，而不是固定的這一點，並用CSS

http://jsfiddle.net/PUCLM/1/

HTML

<h2 id="expandv">Expand</h2> 
<div id="bodywrap1"> 
</div>

CSS

#bodywrap1{ 
border-radius: 5px; 
height: 0px; 
width: 80%; 
overflow: hidden; 
border-top: solid 2px rgba(0,0,0,0.3) ; 
border-bottom: solid 2px rgba(0,0,0,0.3) ; 
    background: blue; 

} 

#bodywrap1.theclass { 
    height: 600px; 
}

jQuery UI的改變周圍的一些東西（你可以只有jQuery UI的動畫高度，而不是普通的jQuery）

$('#expandv').click(function() { 
    $("#bodywrap1").toggleClass('theclass', 500); 
});

來源

2014-01-13 02:15:27 CRABOLO

我應用你的，它運作良好，除了它失去了動畫的事實。但是感謝您指定了我不知道的那種Jquery。 –

在出差之後必須回來，並檢查其餘部分。 –

@BryanFajardo那麼，讓我知道你在找什麼動畫。因爲它確實爲我提供了動畫高度 – CRABOLO

你的HTML不正確寫入，從<頭>標籤H1和H2刪除。

<head> 
    <link rel="stylesheet" type="text/css" href="../css/c++.css"> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 

<h1>C++</h1> 
<h2 id = "expandv">Expand</h2> 
<h1>Variables</h1> 
<!-- ... -->

更改您的JavaScript以下：

$(function() { 
    function expand() { 
     $("#bodywrap1").toggle(function(){ 
      $("#bodywrap1").animate({height:600},200); 
     }); 
    } 

    // Click function for #expandv item 
    $("#expandv").on("click", function() { expand(); }); 

    // Initialize a hidden wrap 
    $("#bodywrap1").css("display", "none"); 
});

工作的jsfiddle：http://jsfiddle.net/TFZ4R/

來源

2014-01-13 02:16:52 rusben

感謝您指出html錯誤，代碼運行得非常好，對我來說它只是更復雜一點。 –

試圖切換一個點擊容器

回答

相關問題