jquery效果 - 向下/向上滑动隐藏的div，隐藏当前显示隐藏的div答案

【问题标题】：jquery effect - Slide hidden div down / Up, hiding currently showed hidden divjquery效果 - 向下/向上滑动隐藏的div，隐藏当前显示隐藏的div
【发布时间】：2011-08-16 02:59:26
【问题描述】：

* 场景

我希望制作一个类似于本网站上的 jquery 效果，它位于主 flash 的右侧添加：

http://www.commbank.com.au/

* 问题

我已经开始了，但是用 muy 方法遇到了一些障碍..也许它不是达到我想要的效果的最佳方法，请提前告知并感谢！

我的代码可以在这里找到：

http://jsfiddle.net/gavAusWeb/HSbzC/1/

我也会在下面显示：

* HTML

<div id="latestNewsJs">              
    <div id="lnClickDivs1" class="sideJsBtns sidejsbtn1"></div>
    <div id="hiddenDiv1" class="secretDiv"></div>
    <div id="lnClickDivs2" class="sideJsBtns sidejsbtn2"></div>
    <div id="hiddenDiv2" class="secretDiv"></div>        
    <div id="lnClickDivs3" class="sideJsBtns sidejsbtn3"></div>
    <div id="hiddenDiv3" class="secretDiv"></div>
    <div id="lnClickDivs4" class="sideJsBtns sidejsbtn4"></div>
    <div id="hiddenDiv4" class="secretDiv"></div>
</div>

* CSS

#latestNewsJs {
    border:1px solid red;
    width:106px;
    min-height:100%; 
}
#lnClickDivs1 {}
#lnClickDivs2 {}
#lnClickDivs3 {}
#lnClickDivs4 {}

.sideJsBtns {
    width:106px;
    height:30px;
    position:relative;
    float:left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px 5px 5px 5px;
    border:1px solid #CCCCCC;
}

#hiddenDiv1 {}
#hiddenDiv2 {}
#hiddenDiv3 {}
#hiddenDiv4 {}

.secretDiv {
    background:orange; 
    width:106px; 
    height:100px; 
    display:none; 
    margin-top:-7px;
    float:left;
}

* jquery

jQuery.noConflict();

jQuery(document).ready(function(){         

    var curI = 0;

    jQuery('.sideJsBtns').click(function(){

        curI = jQuery(this).index() + 1;

        jQuery(".secretDiv").slideUp("medium");

        if (jQuery("#hiddenDiv" + curI).is(":hidden")) 
        {
            jQuery("#hiddenDiv" + curI).slideDown("medium");
        } else {
            jQuery("#hiddenDiv" + curI).slideUp("medium");
        }

    });

});

【问题讨论】：

如果您指的是我认为您所指的页面部分，那通常称为“手风琴”。 jQuery UI has one.
很好的链接，非常感谢！ ;)

标签： jquery button effects slidedown

【解决方案1】：

在您的代码中，您使用index() 方法来获取元素索引。如果您不将任何选择器传递给此方法，它将给出相对于其所有兄弟的索引。

看看这个小提琴我已经修好了

http://jsfiddle.net/HSbzC/2/

【讨论】：

完美.. 至少我很接近，感谢您解释我哪里出错了，非常感谢！ ;)
嗨...我还想停止任何其他 div 的动画，而目前有一个动画...？？此外，如果您连续单击 div 几次，它会在您单击后很长时间保持动画效果.. 我们如何才能阻止这种情况发生..??再次感谢！

【解决方案2】：

或者在没有任何 index()

的情况下使用此代码

http://jsfiddle.net/HSbzC/3/

【讨论】：