我有如下设置的多个div.我想要1(一)个jQuery函数,可以点击ahref(.hide),隐藏< div class =“data”>里面的数据.
这应该是1个可以隐藏多个DIV的功能
如果使用jquery这个选择器,解释会很好,我怀疑这是我需要的.
3.保持简单！
4.另外一个很好的滑动切换效果非常棒,可以在点击时上下滑动.
我尝试了这个,但我必须为每个div制作不同的jquery代码,这是……很长的..
谢谢你的帮助！！并希望正确答案！
<div id="uniqueDiv1" class="frame">
<a href="#" class="hide">Hide</a> // On click of this Div
<div class="data">
<pre>data</pre> // Hide This Div or Data
</pre>
</div>
<div id="uniqueDiv2" class="frame">
<a href="#" class="hide">Hide</a> // On click of this Div
<div class="data">
<pre>data</pre> // Hide This Div or Data
</pre>
</div>
<remember> I want 1 simple Jquery DOM function for all Multiple Divs </remember>
解决方法
你可以这样：
$('div.frame a.hide').click(function(e){
e.preventDefault();
$(this).next('div.data').toggle();
});
http://jsfiddle.net/niklasvh/QbDMs/
> $(‘div.frame a.hide’)选择所有“隐藏”链接.
> e.preventDefault();阻止默认链接操作
> $(this).next(‘div.data’).toggle();选择具有class =“data”的下一个div并切换其可见性
编辑
– 你没有提到这一点,但是如果你想在按钮上切换文本,你可以添加：
if ($(this).text()=='Show'){
$(this).text('Hide');
}else{
$(this).text('Show');
}
使最终代码看起来像：
$('div.frame a.hide').click(function(e){
e.preventDefault();
var div =$(this).next('div.data').slidetoggle();
if ($(this).text()=='Show'){
$(this).text('Hide');
}else{
$(this).text('Show');
}
});