1

我有以下由 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 代码的问题：它没有考虑我添加的第二个类（锚点和 div）。实际上我想隐藏与他的主播相关的特定div，而不是所有div。

感谢您的时间和帮助。

4

2 回答 2

4

尝试使用.nextwhich 似乎可以解决您的标记问题。

$(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以便在页面呈现时隐藏，而不是在页面呈现后隐藏。

于 2013-06-21T14:19:59.673 回答
1

试试这个next：

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

你的代码：

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

用 class 滑动所有 div slidingDiv。但是我们需要考虑仅使用该next()方法在当前范围内单击的元素旁边的div。

于 2013-06-21T14:21:20.950 回答