javascript - 单击时选择第一组 div

Question

我的 html 结构如下:

<h3>Attributes (<a class="on_test" href="#">show/hide all</a>)</h3>
<div class="reference_tborder">
<ul class="reference_table">
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">style</a></p>
      <div class="attribute_description" style="display:none;">test1</div>
    </li>
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">type</a></p>
      <div class="attribute_description" style="display:none;">test1</div>
    </li>
</ul></div>

<h3>Attributes (<a class="on_test" href="#">show/hide all</a>)</h3>
<div class="reference_tborder">
<ul class="reference_table">
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">style</a></p>
      <div class="attribute_description" style="display:none;">test2</div>
    </li>
    <li>
      <p class="attribute_title"><a href="#" onClick="$(this).parent().nextAll('.attribute_description:first').slideToggle('slow'); return false;">type</a></p>
      <div class="attribute_description" style="display:none;">test2</div>
    </li>
</ul></div>

还有更多类似的内容

和 JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $('a.on_test').click(function(event) {
        if ($('.attribute_description:first').css("display") == 'block') {
            $("div.attribute_description").css("display", "none");
        }
        else {
            $("div.attribute_description").css("display", "block");
        }
        return false;
    });
});​
</script>

现在，当我单击“显示/隐藏全部”时，该操作将应用于所有 div。我只想选择我单击的“显示/隐藏全部”下的第一个。任何有助于解决此问题的帮助将不胜感激

这是一个 JSFiddle，以便您可以看到问题 http://jsfiddle.net/5mLys/

Answer 1

看起来你需要做:

$('a.on_test').on('click', function (e) {
    var _nextSection  = $(this).closest('h3').next().find('.reference_table'),
        _descriptions = _nextSection.find('.attribute_description');

    if (_descriptions.first().is(':visible')) {
        _descriptions.hide();
    }
    else {
        _descriptions.show();
    }
    return false;
});

您希望首先抓取最近的部分，这样就不会切换多个部分。

旁注:您可能应该重新考虑您的一般 HTML 结构，看起来您在这里有 div-itis。