1

私はこれ (どうやら) まったく同じ問題がここで対処されているのを見てきましたが、解決策は単に私にとってはうまくいきません. 表示/非表示にしたい要素を選択できないようです。

次の HTML があり、いくつかの同様のアイテムが繰り返されています。

<div class="item">
  <div class="titleRow">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details">
  <p>A long paragraph of description.</p>
</div>

そして、このJS：

$('.details').hide();

$('body.page-id-55 .titleRow').toggle(
    function() {

    $(this).parent().next('.details').slideDown();
    $(this).addClass('close');
    },

    function() {
    $(this).parent().next('.details').slideUp();
    $(this).removeClass('close');
    }
)

私の理解では、.titleRow がクリックされ、.details がその親 (.item) の次の兄弟であるため、.details をターゲットにし、.titleRow div をクリックするとロールダウンおよびロールアップする必要があります。

しかし、実際には何も起こりません。

その行を次のように変更すると

$('.details').slideDown();

それは機能しますが、もちろん .details のすべてのインスタンスがロールダウンおよびロールアップします。クリックした div の次の div をアクティブにしたいだけです。

私は何を間違っていますか？

アップデート：

andyface の素晴らしい提案があっても、クリックしてもまだアクションがありません。私もこれを試しました：

$('body.page-id-55 .titleRow').on('click', function() {

    $details = $(this).parent().next('.details');

    $details.show();

});

(私が思うに) すべての .details を強制的に表示するようにしますが、その場合も何も起こりません。

私のページで他の JS からの干渉の可能性はありますか?

私がこれを行うと、ツリートラバーサルが問題になるようです：

$('body.page-id-55 .titleRow').on('click', function() {

  $('.details').show();

});

それらはすべて表示されます。

ロードされている他の JavaScript との競合の可能性については、正しい WordPress エンキュー メソッドを使用して functions.php を介してロードしているため、js が最後にロードされていることを少なくとも確認できます。これがヘッダー内のすべての js です - 私の 2 つ (別のページ用の 1 つ) は最後です:

<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/sidebarfix.js?ver=9.9.9'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/gteam.js?ver=9.9.9'></script>
<script type='text/javascript' src='http://gazeleyandgazeley.com/site/wp-content/themes/twentythirteen-child/js/rolldowns.js?ver=9.9.9'></script>

それを最初にロードするか、ドキュメントの最後にロードするかで違いはありますか? トラバースが「機能しない」唯一のことであるため、それは別のjsの競合とは関係なく、それについて何かがあるようです...しかし、やはり、私は本当に何も知りません。8^)

4

3 に答える 3

0

使用しているjQueryのバージョンによっては、@ j08691のコメントが正しいため、あまり効果.toggle()がありません。代わりに、次のようなことができます。

$('.titleRow').on('click', function(){

    $details = $(this).parent().next('.details');

    if($details.is(':visible')) {

        $details.hide();
    }
    else {

        $details.show();
    }
});

デモ: http://jsfiddle.net/andyface/mwLRJ/

基本的に、クリックをバインドして詳細要素を取得し、それが表示されているかどうかを確認して必要なアクションを実行します。

詳細セクションで使用することもできますがslideToggle()、特に詳細セクション内の閉じるボタンなど、コンテンツを閉じる別の方法がある場合、トグルが適切に機能しないという問題がありました。いつ何をしたいのかを明確にするのが簡単です。

HTML フォーマットのメモ。私は通常、トグル コンテナーにラップしてから、次のようにトリガーとターゲットを設定することで、このようなことを行います。

<div class="toggle-container">
    <div class="parent-div">
        <div class="toggle-trigger">Click to show</div>
        <div>some other stuff</div>
    </div>
    <div>stuff</div>
    <div class="toggle-target" style="display:none;">CONTENT TO SHOW</div>
</div>

こうすればできる

$('.toggle-target').on('click', function() {

    var $trigger = $(this),
        $container = $trigger.closest('.toggle-container'),
        $target = $container.find('toggle-target');

    if($target.is(':visible')) {

        $target.show();
        $trigger.text('Click to hide');
    }
    else {

        $target.hide();
        $trigger.text('Click to show');
    }
});

これにより、ターゲットとトリガーの周囲にコンテンツを配置する柔軟性が少し向上し、トリガーの親 div の隣に詳細 div を常に保持することを心配する必要がなくなります。

于 2014-05-05T19:43:44.590 に答える
0

HTML 構造を変更せずに、追加の属性を使用して、どの詳細を切り替えるかを決定することをお勧めします。以下の例では、適切なセクションを一致させるために、タイトル div にdata-details属性を使用し、詳細 div にidを使用しています。

HTML

<div class="item">
  <div class="titleRow" data-details="1">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details" id="1">
  <p>A long paragraph of description.</p>
</div>

<div class="item">
  <div class="titleRow" data-details="2">
    <h3 class="yesterday">Some text</h3>
    <h3 class="today">Some other text</h3>
  </div>
</div> <!-- /item (table) -->

<div class="details" id="2">
  <p>A long paragraph of description.</p>
</div>

JS

$('.titleRow').click(function() {
    var details_id = $(this).data('details');
    $('div[id="' + details_id + '"]').toggle();
});

PS。詳細 div に hide() を使用する必要はありません。単純な CSS 表示: 誰もそれを行いません。

コメント付きの作業コード: http://jsfiddle.net/PhAhu/

于 2014-05-06T00:02:00.443 に答える
-2

.parent()要素の直接の親を取得します。祖先までトラバースするには.closest()、 orを使用する必要があります.parents()。これを試してください:

 $(this).closest('.item').next().slideDown();

また

 $(this).parents('.item').next().slideDown();
于 2014-05-05T16:41:16.340 に答える