すべてのボタンの後の最初の要素

Question

<button> Show </button> 
<ol style="display:none;"> 
<?php foreach ($this->getItems() as $_item): ?> 
    <li> 
     <?php if ($_item->getCount() > 0): ?> 
      <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"> 
       <?php echo $_item->getLabel() ?> 
       <?php if ($this->shouldDisplayProductCount()): ?> 
       <span class="count">(<?php echo $_item->getCount() ?>)</span> 
       <?php endif; ?> 
      </a> 
     <?php else: ?> 
      <span> 
       <?php echo $_item->getLabel(); ?> 
       <?php if ($this->shouldDisplayProductCount()): ?> 
        <span class="count">(<?php echo $_item->getCount() ?>)</span> 
       <?php endif; ?> 
      </span> 
     <?php endif; ?> 
    </li> 
<?php endforeach ?> 
</ol> 

私は次のコードを持っています。これはフィルターをマゼンタで印刷します。フィルターを表示/非表示したいと思います。フィルターからボタン - > olのボタン - > olを何度も印刷します。私はこれをしたい：ボタンをクリックすると、表示または非表示にボタンの後に最初のolだけをしたい。私は助けてくれてありがとう！次のjQueryを（使用する代わりに

$('button').click(function() { 
 
    $(this) 
 
    .next() // get immediately next sibling 
 
    .toggle(); // toggle the visible states 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol> 
 
<button>Show</button> 
 
<ol style="display:none;"> 
 
    <li>list 
 
    <li> 
 
</ol>

Answer 1

使用next()方法）また、divタグによってボタンとオルペアをラップすることができます。そうすれば、ButtonとOl JSコードの間にマークアップを追加する必要があるでしょう。

<div class="filters-box"> 
    <button>...</button> 
    <ol>...</ol> 
</div> 

次に、このようなイベントをクリックしてください追加します。

もう少しコードが、必要に延びるように、より弾力的です。このようなラッパーは、位置決め要素にも便利です。悪名高い「逸品」をこれから外さないことは事件の問題です。

Answer 2

兄弟すぐに次の項目を選択する