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

前端之家收集整理的这篇文章主要介绍了JQuery:点击隐藏DIV,如何创建一个单击和隐藏单个div的功能?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有如下设置的多个div.我想要1(一)个jQuery函数,可以点击ahref(.hide),隐藏< div class =“data”>里面的数据.

这应该是1个可以隐藏多个DIV的功能
如果使用jquery这个选择器,解释会很好,我怀疑这是我需要的.
3.保持简单!
4.另外一个很好的滑动切换效果非常棒,可以在点击时上下滑动.@H_301_6@

我尝试了这个,但我必须为每个div制作不同的jquery代码,这是……很长的..@H_301_6@

谢谢你的帮助!!并希望正确答案!@H_301_6@

<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>

解决方法

你可以这样:
$('div.frame a.hide').click(function(e){
   e.preventDefault();
   $(this).next('div.data').toggle(); 
});

http://jsfiddle.net/niklasvh/QbDMs/@H_301_6@

> $(‘div.frame a.hide’)选择所有“隐藏”链接.
> e.preventDefault();阻止默认链接操作
> $(this).next(‘div.data’).toggle();选择具有class =“data”的下一个div并切换其可见性@H_301_6@

编辑
– 你没有提到这一点,但是如果你想在按钮上切换文本,你可以添加:@H_301_6@

if ($(this).text()=='Show'){
     $(this).text('Hide');   
    }else{
     $(this).text('Show');   
}

使最终代码看起来像:@H_301_6@

$('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');   
    }
});
原文链接:https://www.f2er.com/jquery/175858.html

猜你在找的jQuery相关文章