Question

我正在尝试创建一个应用程序，当您单击某些文本时，它会显示内容，当您再次单击时，它会隐藏它。我现在的jquery是这样的：

$(document).ready(function(e) {

$("h2").toggle( 
    function(){ $(this).next().show(); },
    function(){ $(this).next().hide(); }
    ); //end of toggle

}); // end of ready

但是当我在浏览器上运行它时，一切都会立即隐藏

Answer 1

您应该使用.click（）函数，切换用于打开/关闭可见性

“没有参数，.toggle（）方法只是切换元素的可见性”（link to doc）。

除非您在</body>标记（see this question）

之后加载脚本，否则您不需要$（document.ready）

$("h2").click( function(){ 
   $(this).next().toggle(); 
});

编辑：根据您的jQuery版本，行为可能会改变

编辑2：开始隐藏，只需添加

$("h2").next().hide();

或者给它一个类/ id，并在CSS样式表中添加

#yourId {
    visiblity: hidden;
}

Answer 2

您可以使用.click()向<h2>添加onclick处理程序，以切换下一个元素的显示。试试这段代码：

$(document).ready(function() {
    $("h2").click(function(){ 
        $(this).next().toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Title</h2>
<p>Toggle text</p>

jQuery切换点击次数

2 个答案: