JQuery:单击隐藏DIV，如何制作一个函数来单击并隐藏单个div？

Question

我有多个 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>

Answer 1

你可以这样:

$('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');   
    }
});