0

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

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

谢谢！

4

1 回答 1

2

您的代码太复杂了，这使任务感到困惑。

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

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-23T21:57:17.857 回答