JQUERY每个按钮之后的第一个元素

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>

我有以下代码，可以在 magento 中打印过滤器，我想显示/隐藏过滤器。这会多次打印过滤器按钮的按钮 -> ol -> 来自过滤器的 ol。我想这样做：当我单击按钮时，我只想显示或隐藏按钮后的第一个。我需要帮助，谢谢！

Answer 1

使用next()方法选择紧随其后的同级

$('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 2

作为使用 jQuery next（） 的替代方法，您还可以通过 Div 标签包装 Button 和 Ol 对。这样，何时需要在按钮和Ol JS代码之间添加一些标记仍然有效。

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

然后添加如下所示的点击事件：

$('.filters-box button').click(function() {
    var $button = $(this),
        $box = $button.parent(),
        $options = $box.find('ol');
    $options.toggle();
});

多一点代码，但在需要时扩展更具弹性。这种包装器对于定位元素也很方便。不从中做出臭名昭著的"分裂"是一个案例问题。