Question

它显示了复选框，但默认情况下我希望它隐藏但是在点击show

之后

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#ElectronicsChk").toggle(1000);
        $("#SoftwareChk").toggle(1000);
        $("#Dontknow").toggle(1000);
        $("p").toggle(1000);
    });
});
</script>
<style>
div.electro{
     background-color: red;
}
</style>
</head>
<body>

<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>


<div class="electro">
<input type="checkbox" id="ElectronicsChk">
    <p>Hardware Problems</p></input>
    <input type="checkbox" id="SoftwareChk">
    <p>Software Problems</p></input>
    <input type="checkbox" id="Dontknow">
    <p>I dont Know</p></input>
</div>

</body>
</html>

请帮助我是新手，所以请在提交您的代码后解释，...抱歉，我会非常感谢您的帮助...等待早日回复谢谢...

Answer 1

最初要隐藏复选框和p，您只需使用CSS：

div.electro > * {
    display:none;
}

那就是说，似乎你可以通过隐藏和显示div容器而不是每个子元素来简化你的代码：

CSS：

div.electro {
    display:none;
}

JavaScript的：

$(document).ready(function(){
    $("#btn1").click(function(){
        $(".electro").toggle(1000);
    });
});

这更好，因为它遵循DRY principle并且更灵活，例如，如果您向容器添加一些新元素（如某些帮助文本），则不需要更新JavaScript逻辑。

按钮默认隐藏然后显示

1 个答案: