Question

为什么状态问题没有显示？我正在使用切换按钮在没有问题和没有问题之间进行切换，但是由于某些原因，我无法找出为什么没有出现问题。

<!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>

Answer 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>

为什么状态问题没有显示？

1 个答案: