JQuery toggleClass和slideToggle-toggleClass的行为不正确
以下是我真正想要发生的事情: 加载页面时首先显示div 当用户单击“向上箭头”时,箭头将切换为“向下箭头”并隐藏div。当用户单击“向下箭头”时,将显示div 然而,当页面加载时,当用户单击“向上箭头”时,我确实让页面正确地显示div,但直到用户再次单击它时,它仍然保持打开状态 我有以下代码:JQuery toggleClass和slideToggle-toggleClass的行为不正确,jquery,html,css,Jquery,Html,Css,以下是我真正想要发生的事情: 加载页面时首先显示div 当用户单击“向上箭头”时,箭头将切换为“向下箭头”并隐藏div。当用户单击“向下箭头”时,将显示div 然而,当页面加载时,当用户单击“向上箭头”时,我确实让页面正确地显示div,但直到用户再次单击它时,它仍然保持打开状态 我有以下代码: $(document).ready(function(){ $('.show_hide').click(function(){ $(".slidingDiv").slideToggl
$(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 */
});
你可以在
谢谢 您的代码太复杂,使任务变得混乱 以下是一个我相信能达到预期效果的版本: HTML CSS
Hm,你正在为一些非常简单的东西创建非常复杂的CSS和jQ。我同意roXon的观点,你在那里进行的整个箭头操作看起来比它需要的更复杂,并导致你有很多复杂的逻辑来处理它。用很多小房间来建造它的目的是什么?所以只有灰色部分是可点击的?所以它不依赖于img吗?还要注意,
transform:rotate()
在IE8中不受支持(因此,如果您同意的话,您最好使用jQuery 2.0而不是1.9),实际上不支持IE。是的,所以它不依赖于img。灰色部分是可点击的。
<a href="#" id="handle" class="down">v</a>
<div id="dialog" class="open">
<p>Lorem Ipsem...</p>
</div>
$(document).ready(function () {
$("#handle").click(function (e) {
e.preventDefault();
$(this).toggleClass("up down");
$("#dialog").slideToggle();
});
});
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;
}