php - 在其特定的 anchor 上显示/隐藏 div onclick

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 代码片段来隐藏/显示 anchor 上的 div onclick。

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

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

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

这个jquery代码的问题:它没有考虑我添加的第二个类( anchor 和div)。事实上我想隐藏与他的 anchor 相关的特定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>

注意:我向 .slidingDiv 添加了 display:none 样式规则，以便在页面渲染时而不是在页面渲染后隐藏它已渲染。