Javascript 单击选择第一组div

我的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>

属性（）



测试1



测试1


属性（）



测试2



测试2

更像这样

和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>

$（文档）.ready（函数（）{
$（'a.on_test'）。单击（函数（事件）{
if（$（'.attribute_description:first'）.css（“display”）=='block'）{
$（“div.attribute_description”）.css（“显示”、“无”）；
}
否则{
$（“div.attribute_description”）.css（“显示”、“块”）；
}
返回false；
});
});​

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

---

下面是一个JSFIDLE，您可以看到问题

看起来您需要执行以下操作：

$('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。如果您一直在搜索整个页面，请将您的搜索包含到

。请按链接后面的参考顺序
。此外，您应该使用
$。切换
，而不是自己操作


更新

由于您需要更多的显示/隐藏按钮，我认为更好的体验是使用一个复选框来指示要将其设置为什么状态，而不是依赖于第一项。下面的步骤应该可以做到这一点

HTML

<h3>Attributes (<label><input type='checkbox' class="show-hide"> show/hide all</label> )</h3>


您的
引用\u tborder
div的结束标记在哪里？哎呀…错过了…请检查更新（不是说这会修复它），但我会使用
.is（：visible”）
作为
if
语句，只需使用
.hide（）
和
.show（）
作为隐藏和显示。这就是你要找的吗？@KundanSinghChouhan我认为很接近，但OP希望在你单击时两个项目都切换，你的示例只是切换其中一个项目。@Vinit如果它们不在相同的状态下，预期的行为是什么？我们可以检查第一个项目…如果隐藏，则将所有项目都隐藏。如果显示，则全部shown@Vinit在我看来，这是一种糟糕的用户体验。尝试以下使用复选框确定下一个状态应为@Vinit的方法。我认为基于第一个状态的可见性决定显示/隐藏所有状态是一种糟糕的用户体验。考虑使用复选框，这样当没有检查时，链接显示所有的，当未选中时，它隐藏所有。
<h3>Attributes (<label><input type='checkbox' class="show-hide"> show/hide all</label> )</h3>

$('input.show-hide').change(function() {
    var toShowHide =  $('.attribute_description', $(this).closest('h3').next());
    if (this.checked) {
        toShowHide.show(); 
    } else {
        toShowHide.hide();
    }
});