jquery - jQuery 不能在这里使用代码

Question

HTML：

<a href="javascript:void(0);" title="Show and Hide" id="_showhide">
    <span id="textsh">hide</span>
    <div id="contentsShowHide" style="display:none;">
        Contents here
    <div>

JavaScript：

function headerShowHide(){
$(document).ready(function(){
    $('#_showhide').click(function(){
        $('#contentsShowHide').toggle(function(){$("#textsh").text("show")},function(){$("#textsh").text("hide")});
      });
});}

<div id="contentsShowHide">没有显示或隐藏，并且文本没有改变
<span id="textsh">。我在这里想念什么？

Answer 1

采用

$(document).ready(function(){
    $('#_showhide').click(function(){
        $('#contentsShowHide').toggle(function(){
            $("#textsh").html("show")},function(){
                $("#textsh").html("hide");
            });
        });
    });
});

无需调用 headerShowHide()。

Answer 2

试试这个演示

$(document).ready(function(){
$('#_showhide').toggle(function(){
    $("#textsh").text("show");
            $("#contentsShowHide").hide();
}, function(){
                $("#textsh").text("hide"); 
                    $("#contentsShowHide").show();
});
});

Answer 3

$('#_showhide').click(function(){   
    if ($('#contentsShowHide').is(":visible"))
    {
      $('#contentsShowHide').hide();
      $("#textsh").text("show");
    }
    else
    {
      $('#contentsShowHide').show();
      $("#textsh").text("hide");
    }
});

工作演示。简单的方法