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

Question

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

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

谢谢!

Answer 1

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

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

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/