Question

我正在尝试将SlideToggle应用于foreach Loop的类别列表。我尝试了各种各样的技术，但一切都是徒劳的。我发现 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隐藏了display none css属性。你能更好地为jsFiddle提供从这里生成的html代码。或者atlease 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循环？

1 个答案: