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我想显示/隐藏过滤器。这打印很多次按钮 - ＆gt; ol过滤器按钮 - ＆gt;来自过滤器的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对。那样，什么时候需要在Button和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();
});

稍微多一些代码，但需要扩展更具弹性。这种包装物对于定位元件也是便利的。在这个问题上不要做出臭名昭着的“分裂”是个案例。

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

2 个答案: