切換腳本需要更改

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應該是動畫..