我有多个 div,如下所示。我想要1(一) JQuery函数,onclick of ahref(.hide),隐藏 <div class="data">
内的数据。
1.这应该是1个可以隐藏多个DIV的函数
2. 如果使用 jquery this
的话,解释会很好选择器,我怀疑这就是我需要的。
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');
}
});
关于JQuery:单击隐藏DIV,如何制作一个函数来单击并隐藏单个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6255922/