使用 jquery 单击锚标记时如何切换 ul class？

Question

我想保留 ul li a 的切换功能。在 magento 中，我使用以下代码在分层导航中获取 level 1 和 level 2 子类别：

<ul class="level0">
    <?php foreach ($cats as $cat): ?>
        <li class="level1">
            <a href="<?php echo $_helper->getCategoryUrl($cat) ?>">
                <?php echo $cat->getName() ?>
            </a>
            <?php $_category = Mage::getModel('catalog/category')->load($cat->getId()) ?>
            <?php $_subcategories = $_category->getChildrenCategories() ?>
            <?php if (count($_subcategories) > 0): ?>

                <ul class="level1" style="display:none;">
                    <?php foreach ($_subcategories as $_subcategory): ?>
                        <li class="level2">
                            <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>">
                                <?php echo $_subcategory->getName() ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>

            <?php endif; ?>
        </li>

    <?php endforeach; ?>
</ul>

我想在 level1 的 a 锚标记为 clicked.SO 时切换并显示 ul.level1 我使用了下面的 jquery:

<script>
    var $j = jQuery.noConflict();

    $j(function () {
        $j('li.level1 a').click(function () {

            $j('ul.level1:visible').hide();
            $j('ul.level1', this).toggle();
        });
    });
</script>

但是点击li.level1 a时不显示ul.level1。单击 li.level1 时会切换。为什么会这样，请帮我解决这个问题。

Answer 1

您可以使用siblings()

$(this).siblings("ul.level1").toggle();

这里是 jsfiddle.

$('li.level1 a').click(function() {
    $(this).siblings("ul.level1").toggle();
});

.level1{
  color:green;
}
.level2{
  color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1">
  <a href="#">Toggle</a>
  <ul class="level1" style="display:none;">
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  </ul>
</li>
<li class="level1">
  <a href="#">Toggle</a>
  <ul class="level1" style="display:none;">
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  </ul>
</li>
<li class="level1">
  <a href="#">Toggle</a>
  <ul class="level1" style="display:none;">
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  <li class="level2"><a href="#">Level2</a></li>
  </ul>
</li>
</ul>

使用 jquery 单击锚标记时如何切换 ul class？

How to toggle ul class when anchor tag is clicked using jquery?

jquery

toggle