*场景
我希望制作一个类似于本网站上的 jquery 效果,它位于主 Flash 添加的右侧:
*问题
我已经开始了,但是用很多方法遇到了一些障碍..也许这不是达到我想要的效果的最佳方法,请提前告知和感谢!!
我的代码可以在这里找到:
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");
}
});
});
最佳答案
在您的代码中,您使用 index()
方法来获取元素索引。如果您不将任何选择器传递给此方法,它将给出相对于其所有同级的索引。
看看这个 fiddle ,我已经修好了
关于jquery效果-向下/向上滑动隐藏div,隐藏当前显示的隐藏div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7073189/