JQuery的toggleClass和的slideToggle - 不是toggleClass

正常运作这是我真正希望发生的事情：JQuery的toggleClass和的slideToggle - 不是toggleClass

首秀div时页面加载当在“向上箭头”，箭头切换到用户点击“向下箭头”并隐藏div。当用户点击“向下箭头”时，div就会显示出来。

但是，虽然我确实在页面加载时页面正确显示div，但当用户单击“向上箭头”时，它将一直保持到用户再次单击它为止。

我有以下代码：

$(document).ready(function(){ 

    $('.show_hide').click(function(){ 
     $(".slidingDiv").slideToggle('slow',function() { 
     $('#arrow-down1').toggleClass('arrow-down1', $(this).is(':visible')); /* display the down arrow */ 
     $('#arrow-down2').toggleClass('arrow-down2', $(this).is(':visible')); /* display the down arrow */ 
     $('#arrow-up1').toggleClass('showhide', $(this).is(':visible')); /* hides the up arrow */ 
     $('#arrow-up2').toggleClass('showhide', $(this).is(':visible')); /* hides the up arrow */   

    }); /* slidingDiv Toggle */  
    }); /* show_hide click function */ 
});

您可以在http://jsfiddle.net/jdYX6/7/

由于看到这个！

来源

2013-04-23 Nina

嗯，你创造的东西非常复杂，你的CSS和jQ实际上非常简单。 – 2013-04-23 20:33:06

我同意roXon，它看起来像你在那里进行的整个箭头事情比它需要更复杂，并且导致你有很多复杂的逻辑来处理它。什么是建立它与很多小divs的目的？所以只有灰色的部分是可点击的？所以它不是img相关的？ – 2013-04-23 20:54:03

也注意到，'transform：rotate（）'在IE8中是不支持的（所以你不妨使用jQuery 2.0而不是1.9，如果你确定的话） – 2013-04-23 20:57:28

你的代码太复杂了，它使任务混乱。

这里有一个版本，我认为达到了预期的效果：

HTML

<a href="#" id="handle" class="down">v</a> 
<div id="dialog" class="open"> 
    <p>Lorem Ipsem...</p> 
</div>

的JavaScript

$(document).ready(function() { 
    $("#handle").click(function (e) { 
     e.preventDefault(); 
     $(this).toggleClass("up down"); 
     $("#dialog").slideToggle(); 
    }); 
});

CSS

a#handle { 
    display: block; 
    float: left; 
    font-size: 3em; 
    color: gray; 
    text-decoration: none; 
    width: 1em; 
    height: 1em; 
    line-height: 1em; 
    text-align: center; 
    font-family: sans-serif; 
} 
a:active, a:focus { 
    outline-style: none; 
} 
a.up { 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
} 
div#dialog { 
    background-color: #eef; 
    border-radius: 5px; 
    float: left; 
    padding: 2em; 
}

http://jsfiddle.net/ghodmode/GamDn/2/

来源

2013-04-23 21:57:17

JQuery的toggleClass和的slideToggle - 不是toggleClass

回答

相关问题