Question

显示隐藏div代码：

<script type="text/javascript">

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>
<style>
 .slidingDiv {
height:100px;
background-color: #DCFCF2;
padding:20px;
margin-top:10px;
border-bottom:5px solid #99FFFF;
width:400px;
}

.show_hide {
display:none;
}
</style>


<a href="#" class="show_hide">Reply</a>
<div class="slidingDiv">
 Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

这是我在点击回复按钮后打开div的代码...但问题是我的回复按钮已经放了一个while循环...所以每当我点击一个回复按钮，每个回复按钮的div正在打开......所以我想在点击一个回复按钮后只显示一个div ...任何帮助？感谢。

Answer 1

slidingDiv是回复链接的下一个兄弟，因此您可以使用$(this).next('.slidingDiv')查找点击的回复链接的相关slide-div

$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show().click(function () {
        //if it is the reply link then find the next element
        var $slider = $(this).next(".slidingDiv");
        if (!$slider.length) {
            //if the link inside the slider div is cliced then find the ancestor element
            $slider = $(this).closest(".slidingDiv");
        }
        $slider.stop(true, true).slideToggle();
    });
});

演示：Fiddle

打开与while循环中的回复链接相关联的特定div

1 个答案: