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/

JQuery toggleClass和slideToggle - 对于toggleClass行为不正确

1 个答案: