在另一个div标签上使用div标签的css

Question

我有一个带有表格的表格，其中班级名称=＆＃39;颜色＆＃39;。我有另一个div标签用于日历。我想显示日历div，其名称为＆＃39; cal＆＃39;桌子上方的颜色＆＃39;当我点击＆＃39;日历＆＃39;在侧边菜单中。

＆＃13;

＆＃13;

 $(document).ready(function()
    {
    $(".aastext").click(function()
    {
        $(".cal").slideToggle("slow");
    });
     });

＆＃13;

.outer {
  margin-left: 20%;
  margin-top: 1%;
  margin-bottom: 3%;
  height: 820px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  
}
.rest {
  padding:7%;
  height: 660px;

  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  padding: 10% 7px;
}
.sidemenu {
  float: left;
  margin-top: 140px;
  width: 100%;
   }
.content {
  
 
  }
.side{
  width: 24%;
  float: left;
  display: inline-block;
}
 form[name=profile] p {
padding-left: 20%;

}
 hr {
      margin: 0;
      width: 1px;
      height: 700px;
      border: 0;
      background: #fff;
      float: left;
    }
.cal{
 display:none;
position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
                <div class="log">
                <!--<h1>Profile</h1> -->
                       <form method="post" class="lout" ><button class="logout" name="logout" >Logout</button>
                       
                </div> <!--End of log div -->
                <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="employee_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 --><br>
                        <div class="2 menu">
                         <a class="astext">Documents</a>
                          <ul>
		            <li><a href="onboard_form.php" class="astext">forms</a></li>
		            <li><a href="completed_form.php" class="astext">forms</a></li>
		          </ul> 
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a class="aastext">Calender</a>
                           
                        </div> <!--End of menu 3-->
                      <!--  <div class="menu 4">
                          </div> End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                   <!--  <div class="heading" >
                         <h1>Profile</h1>
                      </div>    End of heading div -->
                   <div class="content">
                    <form method="post" name="profile">  <h1>Profile </h1><button name="edit" class=edit >Edit</button>
                    <br><br><br><br>
                    <table class="color">
			
<p>name</p> 
            <p>phone</p> 
            <p>email</p> 
            <p>address</p> 
            <p>street</p> 
            <p>city</p> 
			<br>
                </table>       
		<div id='cal' class='cal'>
         <iframe class="fr" src="" style="border: 1px solid black;" width="450" height="250" frameborder="0" scrolling="no"></iframe>
       </div>
			</form>  
			</td></tr></table> 
			
                   </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

我在你的代码中找到的一些简单的失败是：

您应该在href="#"

中使用<a class="aastext">

您应该为.cal添加一个类，其中display: none更改为至少display: block（即showCal，因此如果您点击aastext它会切换此类可将可见性从display: none更改为display: block）

这就是你的js的样子：

$(document).ready(function()
    {
    $(".aastext").click(function(e)
    {
      e.preventDefault();
        $(".cal").toggleClass("showCal");
    });
});

如果您想将.cal放在.color内，则应将其放在.color内并将position: relative添加到.color

此外，您的table未正确关闭/关闭两次，并且在.cal div出现之前一次。

也许你可以通过我的输入自己调整你的小提琴，我们会看到你需要的地方。

Answer 2

＆＃13;

＆＃13;

 $(document).ready(function()
    {
    $(".aastext").click(function()
    {
     
      var calndr = $('#cal').html();
     
      $('.color').html(calndr);
      
    });
  });

＆＃13;

.outer {
  margin-left: 20%;
  margin-top: 1%;
  margin-bottom: 3%;
  height: 820px;
  width: 60%;
  box-shadow: 10px 10px 5px #888888;
  border: 1px solid #f9f2f2;
  border-radius: 10px;
  
}
.rest {
  padding:7%;
  height: 660px;

  background: -o-linear-gradient(bottom, #e5e3e3 5%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5e3e3), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #e5e3e3 5%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5e3e3", endColorstr="#ffffff");
  background: -o-linear-gradient(top, #e5e3e3, ffffff);
  background-color: #e5e3e3;
  border: 1px solid #f9f2f2;
  border-width: 0px 0px 0px 0px;
  border-radius: 0px 0px 10px 10px;
  padding: 10% 7px;
}
.sidemenu {
  float: left;
  margin-top: 140px;
  width: 100%;
   }
.content {
  
 
  }
.side{
  width: 24%;
  float: left;
  display: inline-block;
}
 form[name=profile] p {
padding-left: 20%;

}
 hr {
      margin: 0;
      width: 1px;
      height: 700px;
      border: 0;
      background: #fff;
      float: left;
    }
.cal{
 display:none;
position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="aastext">Click</div>
<div class="outer">
                <div class="log">
                <!--<h1>Profile</h1> -->
                       <form method="post" class="lout" ><button class="logout" name="logout" >Logout</button>
                       
                </div> <!--End of log div -->
                <div class="rest">
                  <div class="side">
                   <div class="sidemenu">
                        <div class="1 menu">
                          <a href="employee_dashboard.php" class="astext">Profile</a>
                        </div> <!--End of menu1 --><br>
                        <div class="2 menu">
                         <a class="astext">Documents</a>
                          <ul>
		            <li><a href="onboard_form.php" class="astext">forms</a></li>
		            <li><a href="completed_form.php" class="astext">forms</a></li>
		          </ul> 
                        </div> <!--End of menu 2-->
                        <div class="3 menu">
                          <a class="aastext">Calender</a>
                           
                        </div> <!--End of menu 3-->
                      <!--  <div class="menu 4">
                          </div> End of menu 4-->
                   </div> <!--End of side menu -->
                   </div>  <!--End of side div -->
                   <hr>
                   <!--  <div class="heading" >
                         <h1>Profile</h1>
                      </div>    End of heading div -->
                   <div class="content">
                    <form method="post" name="profile">  <h1>Profile </h1><button name="edit" class=edit >Edit</button>
                    <br><br><br><br>
                    <table class="color">
			
<p>name</p> 
            <p>phone</p> 
            <p>email</p> 
            <p>address</p> 
            <p>street</p> 
            <p>city</p> 
			<br>
                </table>       
		<div id='cal' class='cal'>
         <iframe class="fr" src="" style="border: 1px solid black;" width="450" height="250" frameborder="0" scrolling="no"></iframe>
       </div>
			</form>  
			</td></tr></table> 
			
                   </div> <!--End of content -->
                </div> <!--End of rest div -->
          </div> <!--End of outer div-->

＆＃13;

＆＃13;

＆＃13;