0

我有一个像这样的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/

4

2 回答 2

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。

于 2012-10-17T18:21:57.590 回答
1

您一直在搜索整个页面，请将您的搜索包含在.reference_tborder以下链接中。此外，您应该使用$.toggle, 而不是自己做。

http://sfiddle.net/5mLys/3/

$('a.on_test').click(function(event) {
    $('.attribute_description', $(this).parent().next()).toggle();
    return false;
});

更新

由于您想要更多的显示/隐藏按钮，我认为更好的体验是有一个复选框，指示您要将其设置为什么状态，而不是依赖第一项。以下应该这样做

HTML

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

JS

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

http://jsfiddle.net/5mLys/6/

样本

于 2012-10-17T18:28:37.780 回答