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。

Answer 2

您一直在搜索整个页面，并在链接后的.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/

Sample

单击时选择第一组div

2 个答案: