JQuery：单击以隐藏DIV，如何制作一个函数来单击和隐藏单个DIV？

我有多个div，如下所示。我想要1（一）个JQuery函数，单击ahref（.hide），将数据隐藏在

中。
1.这应该是一个可以隐藏多个DIV的函数
2.如果使用jquery

this

选择器，我想这就是我所需要的解释。
3.保持简单
4.此外，一个很好的滑动切换效果将是伟大的，向上和向下滑动点击

我尝试过这样做，但我必须为每个div生成不同的jquery代码，这是。。。长的
谢谢你的帮助！！希望答案正确

//单击此Div
数据//隐藏此Div或数据
//单击此Div
数据//隐藏此Div或数据
我想要一个用于所有多个div的简单jquerydom函数

这应该行得通<代码>此指单击的项目。它只需在父div中查找

.data

，然后滑动切换它

小提琴：

---

注意：文章中的html格式不正确。您应该在

处结束div。

您可以这样做：

$('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.frame a.hide'）

  选择所有“隐藏”链接

• e.preventDefault（）阻止默认链接操作

• $（this.next（'div.data'）.toggle（）

  使用

  class=“data”

  选择下一个div并切换其可见性

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

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

使最终代码看起来像：

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

试试这个：

---

@Fosco只使用了格式错误的html。看小提琴。这很好用，即使是隐藏和显示文本，但是如果我在div.data中有标记，函数就不起作用了，有什么办法吗？@PHP\u Guy，它确实起作用了。我注意到您提供的标记关闭了2个

标记，而不是

，这可能是问题所在。我在我的示例链接中修复了它们，现在应该可以正常工作了。嗨，我在问题中输入了一个类型，我的代码有正确的标记。如果我不使用任何效果，也就是：var div。。。。。。切换（）；但是，当我使用slideToggle（）或fadeToggle（）时，它会设置动画，但文本不会改变，它只显示“隐藏”。有什么想法吗？@PHP\u Guy我已经更新了我的答案/链接。使用slideToggle（）时，它会更改动画中的不透明度，因此不会直接隐藏。因此，当脚本检查它是否隐藏时，它还没有被隐藏。将条件改为检查其当前文本。非常感谢！工作完美！很好，很简单，解释得很好，

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

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

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