1
我有以下HTML:父()兒童()並切換不工作
<div class="connections">
<h2>Grads that share your interests</h2>
<div id="connections_nav" class="collapse">
<ul>
<li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p></li>
<li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p>
</li>
<li><h3><a href="">Sally Struthers </a></h3><p>Class of 2008</p>
</li>
</ul>
</div>
</div>
下面CSS:
.connections h2 {
background-image: url(images/show.gif);
background-position: 0px;
background-repeat: no-repeat;
color: #660a11;
font-size: 13px;
font-weight: bold;
margin: 0px 0px .4em;
padding: 0px 0px 0px 25px; }
.connections .hide h2 {
background-image: url(images/hide.gif);
background-position: 0px;
background-repeat: no-repeat; }
.connections h2.over {
background-image: url(images/hover-show.gif);
background-position: 0px;
background-repeat: no-repeat; }
.connections .hide h2.over {
background-image: url(images/hover-hide.gif);
background-position: 0px;
background-repeat: no-repeat; }
用下面的jQuery:
$(document).ready(function() {
$('.connections h2').click(function() {
$(this).parent().children('.collapse').toggle('slow');
$(this).toggleClass('hide');
});
$('.connections h2').hover(
function() {
$(this).toggleClass('over');
},
function() {
$(this).toggleClass('over');
});
});
發生什麼事是整個div消失。當我取出$(this).toggleClass('hide');
代碼時,摺疊div正確摺疊(但顯然,不應用顯示封閉三角形圖像的'hide'類)。這是爲什麼?