如何将 jQuery SlideToggle 应用于 foreach 循环？

Question

我正在尝试为每个循环的类别列表应用 SlideToggle。我尝试了各种技术，但都是徒劳的。我发现 this 很有用并且与我需要的类似，但这又不起作用。知道为什么它不起作用吗？

<?php if (count($_categories) > 0): ?>
        <script> 
          $(document).ready(function() {
            $(".main_box").click(function() {
            $(this).siblings('.sliding_box').slideToggle();
      });
    });
        </script>
        <?php foreach($_categories as $_category): ?>
        <div class="wrapper">
            <div class="main_box">
                <?php echo $_category->getName() ?>                 
            </div>  
            <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
            <?php $_subcategories = $_category->getChildrenCategories() ?>
            <?php if (count($_subcategories) > 0): ?>
        <div class="sliding_box">   
            <ul class="listx" style="display:none;">
                <?php foreach($_subcategories as $_subcategory): ?>
                    <li class="item" >
                        <a style="color:orange;" href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>">
                            <?php echo $_subcategory->getName() ?>
                        </a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
            <?php endif; ?> 
        </div>
        <?php  endforeach; ?>
    <?php endif; ?>

Answer 1

我认为它一定能正常工作，但问题是它的内部内容 ul 被显示隐藏了 none css 属性。你能更好地为 jsFiddle 提供从这里生成的 html 代码。或者请 html.

这是您的工作状态代码。

$(document).ready(function() {
            $(".main_box").click(function() {
            $(this).siblings('.sliding_box').slideToggle();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
            <div class="main_box">
                Name here             
            </div>  
        <div class="sliding_box">   
            <ul class="listx">
                    <li class="item" >
                        <a style="color:orange;" href="#">
                            link
                        </a>
                    </li>
              <li class="item" >
                        <a style="color:orange;" href="#">
                            link
                        </a>
                    </li>
              <li class="item" >
                        <a style="color:orange;" href="#">
                            link
                        </a>
                    </li>
            </ul>
        </div>

如何将 jQuery SlideToggle 应用于 foreach 循环？

How to Apply jQuery SlideToggle to foreach loop?

jquery

magento

foreach

categories

slidetoggle