JQuery：单击隐藏DIV，我怎样才能制作一个功能来单击和隐藏单个div？答案

【问题标题】：JQuery: Click to Hide DIV, how can I make one function to click and hide individual divs?JQuery：单击隐藏DIV，我怎样才能制作一个功能来单击和隐藏单个div？
【发布时间】：2011-06-06 17:41:59
【问题描述】：

我有多个 div，如下所示。我想要 1 (one) ahref (.hide) 的 onclick 的 JQuery 函数，隐藏 <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>

【问题讨论】：

标签： jquery jquery-selectors

【解决方案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');   
    }
});

【讨论】：

这很完美，即使使用隐藏和显示文本，但如果我在 div.data 中有
```
 
```
标签，则该功能不起作用，有什么想法可以解决吗？跨度>
@PHP_Guy 它确实有效。我注意到您提供的标记关闭了 2 个 </pre> 标签，而不是 </pre></div>，这可能是问题所在。我在示例链接中修复了它们，现在应该可以按预期工作了。
嗨，我在问题中输入了一个类型，我的代码有正确的标签。如果我不使用任何效果，它就可以工作，即：var div...... toggle();但是当我使用slideToggle() 或fadeToggle() 时，它会动画消失，但文本不会改变，它只是显示“隐藏”。有什么想法吗？
@PHP_Guy 我已经更新了我的答案/链接。当您使用 slideToggle() 时，它会更改动画中的不透明度，因此不会直接隐藏。所以当脚本检查它是否被隐藏时，它还没有。更改了条件以检查其当前文本。
非常感谢！工作完美！又好又简单，解释清楚，

【解决方案2】：

$("a.hide").click(function(){
   $(this).parent().find(".data").slideToggle();
});

这应该可行。 this 指的是点击的项目。它只是在父 div 中找到 .data 并在 slideToggles 中找到它。

小提琴：http://jsfiddle.net/yJfbP/

注意：您帖子中的 html 格式不正确。你有 </pre> 你应该在哪里结束一个 div。

【讨论】：

@Fosco 仅使用格式错误的 html。见小提琴。

【解决方案3】：

$(document).ready(function(){
    $('.hide').click(function()) {
        $(this).next().hide();
    });
});

【讨论】：

【解决方案4】：

试试这个：

$(".frame .hide").click(function(){
    var $this = $(this);
    var txt = $this.text();
    if(txt == "Hide"){
        $this.text("Show");
    } else {
        $this.text("Hide");
    }
    $this.next(".data").toggle();
});

【讨论】：