gpt4 book ai didi

JQuery toggleClass 和 slideToggle - toggleClass 的行为不正确

转载 作者:太空宇宙 更新时间:2023-11-04 04:37:03 26 4
gpt4 key购买 nike

这是我真正想要发生的事情:

页面加载时先显示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/ 看到这个

谢谢!

最佳答案

您的代码太复杂,混淆了任务。

这是我认为可以达到预期效果的版本:

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/

关于JQuery toggleClass 和 slideToggle - toggleClass 的行为不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16178591/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com