为什么状态问题没有显示？我正在使用切换按钮在没有问题和没有问题之间进行切换，但是由于某些原因，我无法找出为什么没有出现问题。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").on('click', function(){
$("#No_Issue").toggle();
$("#Issue").toggle();
})
})
</script>
<style>
#No_Issue{
display: block
}
#Issue{
display: none
}
</style>
<body>
<!-- ******************************************Refresh************************************* -->
<meta http-equiv="Refresh" content="60">
<!-- ******************************************BUTTON************************************* -->
<button id="btn" type="button"value= "edit">Switch Status</button>
<p>
<!--/************************************** No Issue Style***********************************/ -->
<div id ="No_Issue" style=" text-align:center;margin-
top:15px; margin-bottom:5px; max-
width:605px;">
<div id="No_stu" style="float:left; width:48%;">
<p style="border-bottom:1px solid black; height:80px">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Stop_hand_nuvola_orange.svg/240px- Stop_hand_nuvola_orange.svg.png"
style="width: 45px; height: 45px; margin-left: 5px; margin-right: 5px">
<Strong><font size="6">Status: No Issue</font></Strong>
</p>
</div>
<!--//**************************************Issue Style*********************************** -->
<div id ="Issue" style=" text-align:center;margin-
top:15px; margin-bottom:5px; max-
width:605px;">
<div id="stu" style="float:left; width:48%;">
<p style="border-bottom:1px solid black;padding-
bottom:10px;"><strong><font size="6">Student Portal</font></strong></p>
<p style="border-bottom:1px solid black; height:80px">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Stop_hand_nuvola_orange.svg/240px- Stop_hand_nuvola_orange.svg.png"
style="width: 45px; height: 45px; margin-left: 5px; margin-right: 5px">
<Strong><font size="6">Status: Issue</font></Strong>
</p>
</div>
</body>
</html>
答案 0 :(得分：1)
您关闭了<div id ="No_stu">标记，但是却忘记了关闭<div id ="No_Issue">标记，这就是HTML解析器将您的<div id="Issue">节点视为<div id ="No_Issue">的子节点的原因，并且它被其隐藏父级切换。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").on('click', function(){
$("#No_Issue").toggle();
$("#Issue").toggle();
})
})
</script>
<style>
#No_Issue{
display: block
}
#Issue{
display: none
}
</style>
<body>
<!-- ******************************************Refresh************************************* -->
<meta http-equiv="Refresh" content="60">
<!-- ******************************************BUTTON************************************* -->
<button id="btn" type="button"value= "edit">Switch Status</button>
<p>
<!--/************************************** No Issue Style***********************************/ -->
<div id ="No_Issue" style=" text-align:center;margin-
top:15px; margin-bottom:5px; max-
width:605px;">
<div id="No_stu" style="float:left; width:48%;">
<p style="border-bottom:1px solid black; height:80px">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Stop_hand_nuvola_orange.svg/240px- Stop_hand_nuvola_orange.svg.png"
style="width: 45px; height: 45px; margin-left: 5px; margin-right: 5px">
<Strong><font size="6">Status: No Issue</font></Strong>
</p>
</div>
</div>
<!--//**************************************Issue Style*********************************** -->
<div id ="Issue" style=" text-align:center;margin-
top:15px; margin-bottom:5px; max-
width:605px;">
<div id="stu" style="float:left; width:48%;">
<p style="border-bottom:1px solid black;padding-
bottom:10px;"><strong><font size="6">Student Portal</font></strong></p>
<p style="border-bottom:1px solid black; height:80px">
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Stop_hand_nuvola_orange.svg/240px- Stop_hand_nuvola_orange.svg.png"
style="width: 45px; height: 45px; margin-left: 5px; margin-right: 5px">
<Strong><font size="6">Status: Issue</font></Strong>
</p>
</div>
</body>
</html>