Question

我有一个页面，其中有一个div，表示＆＃34;隐藏代码＆＃34; 我里面还有一个东西该div应该检查p是否可见。如果是，它将隐藏p并将div的内容更改为＆＃34;显示代码＆＃34; 这只适用于第一次我的意思是，如果p被隐藏，它将被显示和返回，但div的内容只会变为＆＃34;显示代码＆＃34;并且永远不会回到＆＃34;隐藏代码＆＃34; 我的代码：

<div id="toggleCode">Hide code</div>
<p id="code">
    At first this is visible
</p>

#toggleCode{
    color:red;
    background:dodgerblue;
}

$(document).ready(function(){
$("#codearea").css({"height":"15em","width":"15em","background":"gold","margin-top":"5em","border":"4px solid aqua"});

$(".ranges").change(function(){
    $tl=$("#tl").val()+"px "
    $tr=$("#tr").val()+"px "
    $bl=$("#bl").val()+"px "
    $br=$("#br").val()+"px "
    $code=$tl+$tr+$br+$bl;
    $("#codearea").css("border-radius",$code);
});
$("#toggleCode").click(
    function(){
        if ($("#code").is(":visible")){
            $("#toggleCode").html("Show code");
            $("#code").hide();
        }
        else{
            $("#toggle").html("Hide code");
            $("#code").show();
        }

    });
$("#resetCode").click(
    function () {
        $(".ranges").val(0);
        $("#codearea").css("border-radius",0);
    });

});

还有一个jsfiddle：http://jsfiddle.net/9yrjuhv4/ 任何想法

Answer 1

替换

$("#toggle").html("Hide code");

与

$("#toggleCode").html("Hide code");

此外，由于$("#code").is(":visible")，您必须等到动画结束。我建议直接将切换状态保存为JavaScript中的变量。

Answer 2

$("#toggleCode").click(
	function(){
        
		if ($("#code").is(":visible")){
			$(this).html("Show code");
		}
		else{
          $(this).html("HIDE code");
			$("#toggle").html("Hide code");
		}
		$("#code").toggle(789);
	});

#toggleCode{
    color:red;
    background:dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="toggleCode">Hide code</div>
	<div id="code">
		At first this is visible
	</div>

试试这个：demo

$（）。html（）仅在第一次使用

2 个答案: