切换脚本需要更改

Question

我需要更改此脚本，以便我可以点击我的slideshow-expand向下箭头按钮并使其在点击时上下切换框的高度。现在，它作用于整个中点击，但我想它，因为它的幻灯片，每一次你在上一个点击或下一个箭头的箭头切换框的高度

下面是脚本：

$("#slideshow-box").click((function() { 
       var i = 0; 
       return function() { 
        $(this).animate({ 
         height: (++i % 2) ? 166 : 115 
        }, 200); 
       } 
      })()); 
      }); 

下面是HTML：

<div id="slideshow-box"> 
    <div id="slideshow-stage"> 
     <img src="images/slideshowimage.png"> 
     <img src="images/slideshowimage2.png"> 
     <img src="images/slideshowimage3.png"> 
    </div> 

<div id="slideshow-prev"></div> 
<div id="slideshow-next"></div> 
<div id="slideshow-expand"></div> 

这里是CSS：

#slideshow-box { 
    background-color:#CCC; 
    position: absolute; 
    top:129px; 
    width:883px; 
    height:115px; 
    overflow:hidden; 
    z-index:1; 
} 

#slideshow-stage { 
    position: absolute; 
    top:0; 
    width:883px; 
    height:115px; 
    z-index:1; 
    margin-left: auto; 
    margin-right: auto; 
} 

#slideshow-stage>img { 
    position:absolute; 
    left:0; 
    top:0; 
} 

#slideshow-prev { 
    position: absolute; 
    top:40px; 
    left:10px; 
    background-image: url(images/arrows_left.png); 
    background-repeat:no-repeat; 
    width:22px; 
    height:42px; 
    opacity: .4; 
    z-index:50; 
} 

#slideshow-prev:hover { 
    opacity: 10; 
    cursor:pointer; 
} 

#slideshow-next { 
    position: absolute; 
    top:40px; 
    right:10px; 
    background-image: url(images/arrows_right.png); 
    background-repeat:no-repeat; 
    width:22px; 
    height:42px; 
    opacity: .4; 
    z-index:50; 
} 

#slideshow-next:hover { 
    opacity: 10; 
    cursor:pointer; 
} 

#slideshow-expand { 
    background-image: url(images/arrows_down.png); 
    background-repeat:no-repeat; 
    width:28px; 
    height:14px; 
    position: absolute; 
    bottom:10px; 
    left:441px; 
    opacity: .4; 
    z-index:50; 

} 

#slideshow-expand:hover { 
    position: absolute; 
    bottom:10px; 
    left:441px; 
    opacity: 10; 
    cursor:pointer; 
} 

Answer 1

有你试图改变：

$("#slideshow-box").click((function() ... 

到

$("#slideshow-expand").click((function() ... 

编辑

重新读你之后可能需要将其更改为：

$("#slideshow-expand").click((function() { 
    var i = 0; 
    return function() { 
     $("#slideshow-box").animate({ 
      height: (++i % 2) ? 166 : 115 
      }, 200); 
      } 
     })()); 
    }); 

请注意，这里的区别是我们没有使用this，因为当你点击slideshow-expand，slideshow-box应该是动画..