Question

如何根据点击按钮隐藏和显示内容？我尝试这样做，但它不起作用，我不知道什么是错的。你能救我吗？

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>


 <div id="list" >

    <input id="button" type="button" value="Show Status"   onclick="ShowHide()" />
</div>


<div id="content2" style="display:none" >
    <img src="http://kobylnica.pl/pic/item,69,1,x.jpg" alt="Tekst alternatywny" />
    Miejsce na wyświetlenie filmiku i opisu trasy
</div>

<script type="text/javascript">
    function ShowHide(){
            if ($("#content2").css('display') == 'none'){
            $("#content2").show();
            $("#button").val("Hide");
        }
        else{
            $("#content2").hide();
            $("#button").val("Show Status");
        }
    }
</script>

Answer 1

您可以使用以下方法简化代码：

<div id="list" >
    <input id="button" type="button" value="Show Status" onclick="$('#content2').toggle(); ($(this).val() == 'Hide')?$(this).val('Show Status'):$(this).val('Hide')" />
</div>

Answer 2

试试这段代码：

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<div id="list">
    <input id="button" type="button" value="Show Status" onclick="ShowHide()" />
</div>
<div id="content2" style="display:none">
    <img src="http://kobylnica.pl/pic/item,69,1,x.jpg" alt="Tekst alternatywny" />Miejsce na wyświetlenie filmiku i opisu trasy</div>
<script>
function ShowHide(){
    $("#content2").toggle();
    $("#button").val(function(_,t) { return t == "Hide" ? 'Show Status' : "Hide"; });
}
</script>

示例：http://jsfiddle.net/dTN9h/4/

隐藏并显示div取决于单击按钮（jquery）

2 个答案: