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 に答える