使用列表項目進行懸停時的手風琴

Question

我正在嘗試顯示手風琴等列表項目，並且我參考此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> 

我用您的問題發表評論時提及第二連桿。
也不要忘了添加的鏈接提到page.xml的jquery.js文件後prototype.js

你也不會被要求額外的JS和CSS，你以前使用過，所以你可以將其刪除。