jquery - jQuery隐藏（和显示）父元素中的元素

Question

好吧，也许是天太晚了！我已经尝试了大多数相关问题，我相信这很简单，但这里有：

这是 HTML 结构：

<article>

<div class="info-wrap">
<p>blah blah</p>
<a href="#" class="info-close">Close div!</a>
</div>

<a href="#" class="info-show">Show div!</a>

</article>

将有上述结构的多个实例（Wordpress 循环），因此它应该只显示该实例中的 div（不是全部）。到目前为止，这是我的 jQuery：

$("a.info-show").click(function(){
     $(this).parent('article').find('.info-wrap').animate({ opacity: 'show' }, "slow");
    return false;
});

不工作。我在这里想念什么？谢谢！

score 2 · Accepted Answer

尝试这个：

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').animate({ opacity: 1 }, "slow");
        return false;
    });
});

或使用：

$(document).ready(function(){
    $("a.info-show").click(function(e){
        e.preventDefault();
        $(this).parents('article').find('div.info-wrap').fadeIn('slow');
        return false;
    });
});

阅读http://api.jquery.com/fadeIn/和http://api.jquery.com/animate/

score 1 · Accepted Answer

您可以使用创建的示例

$("a.info-show").click(function(e){

$(this).parents('article').find('.info-wrap').fadeIn('slow');
    $("a.info-show").hide('slow');
    return false;
});


$("a.info-close").click(function(e){

$(this).parents('article').find('.info-wrap').fadeOut('slow');
 $("a.info-show").show('slow');
    return false;
});

并使用小提琴链接来测试你的问题。

score 0 · Accepted Answer

尝试：

$("a.info-show").click(function(e){
    $(this).closest("article").find("div.info-wrap").fadeIn(500);
});

还要确保在 jquery 初始化时这些类确实存在。如果您为此使用 ajax，将bind这些添加到父节点可能是个好主意

score 0 · Accepted Answer

你的代码对我来说看起来不错。我能想到的唯一问题是您没有将点击功能绑定到事件（如 document.ready()）。这是一个适合您的工作JSFiddle。

JS

$(document).ready(function(){
    $('.info-show').click(function(){
        var info = $(this).parent().find('.info-wrap > p');
        info.animate({ opacity: 1 }, "slow");
    });
    $('.info-close').click(function(){
        var info = $(this).parent().find('p');
        info.animate({ opacity: 0 }, "slow");
    });
});

还要确保您最初将不透明度设置为 0 以使其正常工作。

CSS

article .info-wrap > p {
   opacity: 0;
}

score 0 · Accepted Answer

尝试.prev()：

$("a.info-show").click(function () {
   $(this).prev('.info-wrap').fadeIn();
   return false;
});

结帐小提琴

score 0 · Accepted Answer

确保您的脚本在 onready 内部运行，除此之外看起来还不错。

$(function(){
    $("a.info-show").click(function(){
        $(this).siblings('.info-wrap').animate({ opacity: 'show' }, "slow");
        return false;
    });
})

演示：小提琴

jquery - jQuery隐藏（和显示）父元素中的元素

6 回答 6

JS

CSS

结帐小提琴

Related

Reference