Question

我正在尝试显示像accordion这样的列表项，我参考了这个link。

这里手风琴可以点击我在悬停时需要相同的功能。

我的网站链接：click here。

Answer 1

使用以下代码替换 accordion.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之后添加链接中提到的prototype.js文件到page.xml

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

使用列表项悬停的手风琴

1 个答案: