magento - 使用列表项悬停手风琴

Question

我正在尝试显示诸如手风琴之类的列表项，我参考了此链接。

在这里，手风琴在单击时起作用，我在悬停时需要相同的功能。

我的网站链接：点击这里。

Answer 1

用以下代码替换您的手风琴.phtml内容：

    <script type="text/javascript">

    $(document).ready(function()
    {
        //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
        $("#firstpane p.menu_head").click(function()
        {
            $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            $(this).siblings().css({backgroundImage:"url(left.png)"});
        });
        //slides the element with class "menu_body" when mouse is over the paragraph
        $("#secondpane p.menu_head").mouseover(function()
        {
             $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
             $(this).siblings().css({backgroundImage:"url(left.png)"});
        });
    });
    </script>
    <style type="text/css">
    body {
        margin: 10px auto;
        font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
    }
    .menu_list {    
        width: 150px;
    }
    .menu_head {
        padding: 5px 10px;
        cursor: pointer;
        position: relative;
        margin:1px;
        font-weight:bold;
        background: #eef4d3 url(left.png) center right no-repeat;
    }
    .menu_body {
        display:none;
    }
    .menu_body a{
      display:block;
      color:#006699;
      background-color:#EFEFEF;
      padding-left:10px;
      font-weight:bold;
      text-decoration:none;
    }
    .menu_body a:hover{
      color: #000000;
      text-decoration:underline;
      }
    </style>

<div>
  <div id="secondpane" class="menu_list"> <!--Code for menu starts here-->

        <?php foreach ($this->getStoreCategories() as $_category): ?>
        <p class="menu_head"><a href = "<?php echo Mage::getBaseUrl().$_category->getRequestPath(); ?>"><?php echo $_category->getName(); ?></a></p>
        <div class="menu_body">
        <?php $children = Mage::getModel('catalog/category')->getCategories($_category->getId());
        foreach ($children as $category)
            {
            ?>
                <a href="<?php echo Mage::getBaseUrl().$category->getRequestPath(); ?>"><?php echo $category->getName(); ?></a>
            <?php
            }
            ?>
        </div>
        <?php endforeach ?>
  </div>  <!--Code for menu ends here-->
</div>

我已经使用了对您的问题的评论中提到的第二个链接。
也不要忘记将jquery.js链接中提到的文件添加到 page.xml 之后prototype.js

此外，您不需要以前使用过的额外 JS 和 CSS，因此您可以将其删除。