我是初学者编码器,需要以下问题的帮助。我正在尝试使用带有表的jQuery手风琴函数制作日历。现在,在屏幕加载时可以看到完整的表格。我希望手风琴关闭onload所以你只能先看到月份标题,然后在悬停发生时打开。当手风琴被触发时,日历也在缩小。我试图将代码与基础相提并论。非常感谢任何帮助。
这是代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table.CityTable th') .hover(
function() {
$(this) .parents('table.CityTable') .children('tbody') .toggle("slow");
}
)
$('table.StateTable tr.statetablerow th') .hover(
function() {
$(this) .parents('table.StateTable') .children('tbody') .slideToggle("slow");
}
)
});
</script>
</head>
<body>
<div id="container">
<div id="contentarea"> <font class="title">2011 Calendar</font>
<body>
<div id="">
<table class="StateTable" width="100%">
<thead>
<tr class="statetablerow">
<th colspan="7">January</th>
</tr>
</thead>
<tbody>
<tr>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left</td>
<td valign=top align=left></td>
<td valign=top align=left>1</td>
</tr>
<tr>
<td valign=top align=left>2</td>
<td valign=top align=left>3</td>
<td valign=top align=left>4</td>
<td valign=top align=left>5</td>
<td align=left valign=top>6</td>
<td valign=top align=left>7</td>
</tr>
<tr>
<td valign=top align=left>9</td>
<td valign=top align=left>10</td>
<td valign=top align=left>11</td>
<td valign=top align=left>12</td>
<td valign=top align=left>13</td>
<td valign=top align=left>14</td>
<td valign=top align=left>15</td>
</tr>
<tr>
<td valign=top align=left>16</td>
<td valign=top align=left>17</td>
<td valign=top align=left>18</td>
<td valign=top align=left>19</td>
<td valign=top align=left>20</td>
<td valign=top align=left>21</td>
<td valign=top align=left>22</td>
</tr>
<tr>
<td valign=top align=left>23</td>
<td valign=top align=left>24</td>
<td valign=top align=left>25</td>
<td valign=top align=left>26</td>
<td valign=top align=left>27</td>
<td valign=top align=left>28</td>
<td valign=top align=left>29</td>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
</tr>
</tbody>
</table>
</div>
<table class="StateTable" width="100%">
<thead>
<tr class="statetablerow">
<th colspan="7">February</th>
</tr>
</thead>
<tbody>
<tr>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left</td>
<td valign=top align=left></td>
<td valign=top align=left>1</td>
</tr>
<tr>
<td valign=top align=left>2</td>
<td valign=top align=left>3</td>
<td valign=top align=left>4</td>
<td valign=top align=left>5</td>
<td align=left valign=top>6</td>
<td valign=top align=left>7</td>
<td valign=top align=left>8</td>
</tr>
<tr>
<td valign=top align=left>9</td>
<td valign=top align=left>10</td>
<td valign=top align=left>11</td>
<td valign=top align=left>12</td>
<td valign=top align=left>13</td>
<td valign=top align=left>14</td>
<td valign=top align=left>15</td>
</tr>
<tr>
<td valign=top align=left>16</td>
<td valign=top align=left>17</td>
<td valign=top align=left>18</td>
<td valign=top align=left>19</td>
<td valign=top align=left>20</td>
<td valign=top align=left>21</td>
<td valign=top align=left>22</td>
</tr>
<tr>
<td valign=top align=left>23</td>
<td valign=top align=left>24</td>
<td valign=top align=left>25</td>
<td valign=top align=left>26</td>
<td valign=top align=left>27</td>
<td valign=top align=left>28</td>
<td valign=top align=left>29</td>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这是CSS:
#container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}
#contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}
table.CityTable, table.StateTable{width="100%"}
table.StateTable{margin:0px;}
table td{padding:5px;}
table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}
table.CityTable thead th{cursor:pointer; color:black;}
table.StateTable td.nopad{padding:0;}
答案 0 :(得分:1)
这应该这样做:
$(document).ready(function(){
$('table.StateTable tbody').hide(); //or add display:none in css
$('table.StateTable').hover(
function() {
$(this).find('tbody').slideToggle("slow");
},
function() {
$(this).find('tbody').slideToggle("slow");
})
});
答案 1 :(得分:0)
#container {width: 800px;height: 100%;top: 20px;bottom: 20px;text-align: center;margin: auto;left: auto;right: auto;}
#contentarea {top: 240;height: 100%;width: 700px;right: 50px;left: 50px;padding-right: 40px;padding-left: 40px;}
table.CityTable, table.StateTable{width="100%"}
table.StateTable{margin:0px;}
table td{padding:5px;}
table.StateTable thead th{background: #333; padding: 5px; cursor:pointer; color:white;}
table.CityTable thead th{cursor:pointer; color:black;}
table.StateTable td.nopad{padding:0;}
<div id="container">
<div id="contentarea"> <font class="title">2011 Calendar</font>
<div id="">
<table class="StateTable" width="100%">
<thead>
<tr class="statetablerow header">
<th colspan="7">January</th>
</tr>
</thead>
<tbody>
<tr>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left</td>
<td valign=top align=left></td>
<td valign=top align=left>1</td>
</tr>
<tr>
<td valign=top align=left>2</td>
<td valign=top align=left>3</td>
<td valign=top align=left>4</td>
<td valign=top align=left>5</td>
<td align=left valign=top>6</td>
<td valign=top align=left>7</td>
</tr>
<tr>
<td valign=top align=left>9</td>
<td valign=top align=left>10</td>
<td valign=top align=left>11</td>
<td valign=top align=left>12</td>
<td valign=top align=left>13</td>
<td valign=top align=left>14</td>
<td valign=top align=left>15</td>
</tr>
<tr>
<td valign=top align=left>16</td>
<td valign=top align=left>17</td>
<td valign=top align=left>18</td>
<td valign=top align=left>19</td>
<td valign=top align=left>20</td>
<td valign=top align=left>21</td>
<td valign=top align=left>22</td>
</tr>
<tr>
<td valign=top align=left>23</td>
<td valign=top align=left>24</td>
<td valign=top align=left>25</td>
<td valign=top align=left>26</td>
<td valign=top align=left>27</td>
<td valign=top align=left>28</td>
<td valign=top align=left>29</td>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
</tr>
</tbody>
</table>
</div>
<table class="StateTable t-month" width="100%">
<thead>
<tr class="statetablerow header">
<th colspan="7">February</th>
</tr>
</thead>
<tbody>
<tr>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Sunday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Monday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Tuesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Wednesday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Thursday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Friday</font></th>
<th valign=center align=middle bgcolor="#333333"><font color="#FFFFFF">Saturday</font></th>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left</td>
<td valign=top align=left></td>
<td valign=top align=left>1</td>
</tr>
<tr>
<td valign=top align=left>2</td>
<td valign=top align=left>3</td>
<td valign=top align=left>4</td>
<td valign=top align=left>5</td>
<td align=left valign=top>6</td>
<td valign=top align=left>7</td>
<td valign=top align=left>8</td>
</tr>
<tr>
<td valign=top align=left>9</td>
<td valign=top align=left>10</td>
<td valign=top align=left>11</td>
<td valign=top align=left>12</td>
<td valign=top align=left>13</td>
<td valign=top align=left>14</td>
<td valign=top align=left>15</td>
</tr>
<tr>
<td valign=top align=left>16</td>
<td valign=top align=left>17</td>
<td valign=top align=left>18</td>
<td valign=top align=left>19</td>
<td valign=top align=left>20</td>
<td valign=top align=left>21</td>
<td valign=top align=left>22</td>
</tr>
<tr>
<td valign=top align=left>23</td>
<td valign=top align=left>24</td>
<td valign=top align=left>25</td>
<td valign=top align=left>26</td>
<td valign=top align=left>27</td>
<td valign=top align=left>28</td>
<td valign=top align=left>29</td>
</tr>
<tr>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
<td valign=top align=left></td>
</tr>
</tbody>
</table>
</div>
<!--- Script -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tbody').hide();
$('table thead tr').mouseover(function() {
$('table tbody').hide();
$(this).parent().next().slideToggle("slow");
});
});
</script>