Question

我有多个div，如下面设置的那样。我想要 1（一个）点击ahref（.hide）的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>

Answer 1

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

这应该有效。 this指的是点击的项目。它只是找到父div中的.data和slideToggle s。

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

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

Answer 2

你可以这样：

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

Answer 3

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

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

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

4 个答案: