Question

我有PHP生成的以下HTML：

<input><label><a href="#" class="show_hide 139">anchor 139</a></label>
<div class="slidingDiv 139" style="display: none;">content 139</div>

<a href="#" class="show_hide 140">anchor 140</a></label>
<div class="slidingDiv 140" style="display: none;">content 140</div>

<input><label><a href="#" class="show_hide 141">anchor 141</a></label>
<div class="slidingDiv 141" style="display: none;">content 141</div>

<input><label><a href="#" class="show_hide 142">anchor 142</a></label>
<div class="slidingDiv 142" style="display: none;">content 142</div>

正如您所看到的，第二类anchor和div对于循环的每次迭代都是相同的。我之所以这样，是因为我正在使用一个jquery片段来隐藏/显示div onclick on anchor。

<script type="text/javascript">
$(document).ready(function(){
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){

    $(".slidingDiv").slideToggle();
    });
});
</script>

这个jquery代码的问题：它没有考虑我添加的第二个类（对于anchor和div）。事实上，我想隐藏与他的锚相关的特定div，而不是所有的div。

感谢您的时间和帮助。

Answer 1

尝试使用.next，这似乎可以为您的标记提供技巧。

$(this).next('.slidingDiv').slideToggle();

完整代码：

<style>
    .slidingDiv { display: none; }
</style>
<script>
  $(document).ready(function(){
      $('.show_hide').click(function(e){
          e.preventDefault(); //to prevent default action of link tag
          $(this).parent().next('.slidingDiv').slideToggle();
      });
});
</script>

注意：我将display:none样式规则添加到.slidingDiv，以便在呈现页面时隐藏它，而不是在呈现页面后隐藏。

Answer 2

使用next：

尝试此操作

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

您的代码：

$(".slidingDiv").slideToggle();

正在使用类slidingDiv滑动所有div。但是我们需要考虑仅使用next()方法在当前作用域中单击的元素旁边的div。

在其特定的锚点上显示/隐藏div onclick

2 个答案: