magento - リスト アイテムを使用したホバー時のアコーディオン

Question

アコーディオンのようなリスト項目を表示しようとしており、このリンクを参照しています。

ここで、アコーディオンはクリックで機能します。ホバー時に同じ機能が必要です。

私のウェブサイトのリンク:ここをクリック.

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>

あなたの質問へのコメントに記載されている2番目のリンクを使用しました。また、後に page.xml へのリンクに記載されているファイル
を追加することを忘れないでください。jquery.jsprototype.js

また、以前に使用した追加の JS と CSS は必要ないため、削除できます。