0

2 つのことを行うドロップダウン メニューが必要です。

  1. ホバーすると、サブメニューが表示されるはずです。マウスを取り出すと隠れるはずです。
  2. ユーザーがメニューまたはそのサブメニューをクリックすると、サブメニューが表示されます。マウスを取り出したときに隠れてはいけません。

これを試してみましたが、うまくいきません...

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#1">Home</a>
    <li class="dropdown"><a href="#2">Solutions</a>
        <ul class="sub_navigation">
            <li><a href="#2">Video</a></li>
            <li><a href="#3">Animation</a></li>
        </ul>
    </li>
</ul>

JS

<script type="text/javascript">
$('body').ready(function() {
    $('.dropdown').hover(function() {
        $(this).find('.sub_navigation').slideToggle(); 
    });
});
</script>
<script type="text/javascript">
$('body').ready(function() {
    $('.dropdown a').click(function() {
        $(this).find('.sub_navigation').show(); 
    });
});
 </script>

何かコツを教えてください...

ありがとうございました

4

1 に答える 1

1

これを行う大まかな方法​​は次のとおりです。まず、sub_navigation を非表示にする必要があります。

.sub_navigation{
    display:none;
}

jQuery:

$('body').ready(function() {
    $('.dropdown').hover(function() {
        if(!$(this).hasClass("isClicked")){
        $(this).find('.sub_navigation').slideToggle();
        }
    });
    $('.dropdown').click(function(){
        $(this).addClass('isClicked');
    });
    $('.dropdown .sub_navigation').click(function(){
        $(this).parent().addClass("isClicked");
    });
});

</p>

ここで作業ソリューションを参照してください

于 2012-06-07T11:51:13.380 に答える