Question

我试图在每次点击偶数处理程序时使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：

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

HTML：

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

这是我正在处理的网站，以及具体的网页。 http://hourtimeagent.com/html/c++.php

Answer 1

两次点击的原因是因为.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);
});

Answer 2

您的html未正确写入，请从＆lt; head＆gt;中删除标签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/

Answer 3

根据显示属性切换工作，因此将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;
}

尝试在一次点击时切换容器

3 个答案: