我有一个应用于div的悬停效果。它所做的只是增加鼠标中心的高度,降低鼠舍的高度。
作为一个单独的函数,我有一个点击效果应用于其中一个div:
$(function(){
$( '#div1 a' ).click(function() {
$( '.theRestofTheDivs' ).each(function() {
$(this).animate({height: "30px"}, 200);
})
});
});
它很好用,除非我鼠标移动,它会崩溃。显然那是因为我有以前的悬停效果。
点击之后,我不想让它能够折叠,直到点击另一个带有锚点的div。有什么想法吗?
修改
提供的代码已经过简化,要在完整的上下文中查看,请转到http://www.raceramps.com/v2
鼠标悬停“全部浏览”,然后单击它。我不希望它崩溃。
答案 0 :(得分:6)
你可以在单击的一个上放一个类,如果该类不存在则只折叠div
如果单击另一个div,则从上一个div中删除该类,并将其添加到单击的
中$(function(){
$( '#div1 a' ).click(function() {
$(".KeepOpen").removeClass(".KeepOpen");
$(this).addClass("KeepOpen");
$( '.theRestofTheDivs' ).each(function() {
$(this).animate({height: "30px"}, 200);
})
});
});
在您的折叠部分添加此
if ( !$(this).hasClass("KeepOpen") )
// Collapse
答案 1 :(得分:0)
假设您的基本标记看起来像这样:
<div id="div1" class="myClass"><a href="#">Div1</a></div>
<div id="div2" class="myClass"><a href="#">Div2</a></div>
<div id="div3" class="myClass"><a href="#">Div3</a></div>
你可以这样做:
// Mouseover event
$(".myClass a").live("mouseover", function () {
// If it already has the "selected" class applied to it, do nothing
if ( $(this).is(".selected") ) {
return;
}
else {
// Do your hover effect
$(this).animate({height: "30px"}, 200);
}
});
// Mouseout event
$(".myClass a").live ("mouseout", function () {
// If it already has the "selected" class applied to it, do nothing
if ( $(this).is(".selected") {
return;
}
else {
// Do your mouseout effect (return to default state or whatever else)
$(this).animate({height: "20px"}, 200);
}
});
// Click Event
$(".myClass a").live("click", function () {
// If it already has the "selected" class applied to it, do nothing
if ( $(this).is(".selected") ) {
return;
}
else {
// Remove the selected class from any element that already has it
$(".selected").removeClass(".selected");
$(this).addClass("selected");
}
});
像这样的东西,或像这样建模应该有用。