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

不工作。我在这里错过了什么？谢谢！

Answer 1

试试这个：

$(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/

Answer 2

你可以使用像

这样的例子

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

并使用fiddle link来测试您的问题。

Answer 3

确保你的脚本在onready内部运行，除了看起来不错。

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

演示：Fiddle

Answer 4

TRY：

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

还要确保在jquery初始化时实际存在类。如果您正在使用ajax，那么bind这些对于父节点可能是个好主意

Answer 5

您的代码对我来说很好。我能想到的唯一问题是你没有将click函数绑定到事件（如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;
}

Answer 6

尝试.prev()：

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

jQuery在父级中隐藏（和显示）元素

6 个答案:

JS

CSS

checkout the fiddle