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

试试 demo

$(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");
    }
});

Working Demo。简单的方法

jQuery在这里不使用代码

3 个答案: