3

私のjQueryコード:

$(function()
{
    $(".third-categories").hide();  
});

$(function()
{
    $(".second-categories").hover(function() {
    $(this).next(".third-categories").show("slow");},
    function(){
    $(this).next(".third-categories").hide("slow");}
    );

});
$(function()
{
    $(".third-categories").mouseover(function(){(".third-categories").show("slow");});  
});

私の HTML コード: 私は smarty テンプレートで書いていますが、衣装は次のようになります:

<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
</html>

「第 2 カテゴリ」の UL にマウスを合わせると、「第 3 カテゴリ」の UL が表示されます。これは発生していますが、マウスをその上に置いたときに「第 3 カテゴリ」の UL が表示されたままになるようにします。私はすべてを試しましたが、何が問題なのかわかりません...誰かが助けていただければ幸いです...ありがとう！

4

1 に答える 1

1

これはあなたが探しているものですか:ワーキングデモ http://jsfiddle.net/8gdxG/

また、HTML が少し間違っているように見えます。また、準備ができているドキュメントを複数回追加する必要はありません。一度で十分です。

以下の残りのコードは原因に役立ちます:)

JQコード

$('.second-categories').mouseleave(function() {

        $(this).find('li ul.third-categories').each(function () {
            $(this).stop().slideUp('slow');
        });
    });

    $("ul li").mouseenter(function() { $(this).children('ul').stop().slideDown('slow'); });​

HTMLコード

<ul class="second-categories">
    <li>Hulk
      <ul class="third-categories">
          <li>child1</li>
         <li>child2</li>
      </ul>
     </li>    
    <li>Ironman
     <ul class="third-categories">
          <li>child</li>
         <li>child</li>
      </ul> 
    </li>
    <li>Thor
      <ul class="third-categories">
          <li>child</li>
      </ul>              
    </li>
</ul>​
于 2012-11-04T01:26:13.183 に答える