JQuery:点击隐藏DIV,如何创建一个单击和隐藏单个div的功能？

Question

我有如下设置的多个div.我想要1(一)个 jQuery函数,点击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();下一个 div 并class="data"切换其可见性

编辑 - 您没有提到这一点，但如果您也想切换按钮上的文本，您可以添加：

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