如果父级活动，则jQuery下拉菜单应该展开 [英] jQuery dropdown menu should expand if parent is active

问题描述

我在jQuery中做了一个简单的下拉菜单。它工作正常我有一个问题。

问题是，我需要保持活动页面下拉列表扩展在下面的示例中，具有.inpath的子菜单父母需要始终保持扩大。如果您将鼠标悬停在另一个菜单项上，则应显示相关的子页面，并且当您悬停返回时显示活动的子页面。任何帮助是非常好的:-)！

我的HTML：

 < div id =menu > 
 
< ul> 
 
< li>< a href => Hvem< / a>< / li> 
< li>< a href => Hvad< / a> 
< ul> 
< li>< a href => Produkter< / a>< / li> 
< li>< a href => Leveringer< / a>< / li> 
< / ul> 
< / li> 
 
< li class =inpath>< a href => Hvordan< / a> 
 
< ul> 
 
< li>< a href => Reklame< / a>< / li> 
< li>< a href => PR< / a>< / li> 
< li>< a href =>网站< / a>< / li> 
< li>< a href => Illustrationer< / a>< / li> 
 
< / ul> 
 
< / li> 
< li class =last-item>< a href =>Sådan！< / a>< / li> 
 
< / ul> 
 
< div class =clear><！ -  clearfix  - >< / div> 
 
< / div> 
  

我的jQuery：

 < script type =text / javascript> 
 // mouseenter，mouseover，hover 
 // mouseleave，mouseout，
 $（document）.ready（function（）{
 $（'＃menu ul li ul'） .hide（）; 
 $（'＃menu li'）。hover（
 function（）{
 //显示其子菜单
 $（'ul'，this）。 slideDown（100）; 
 
}，
 function（）{
 //隐藏其子菜单
 $（'ul'，this）.slideUp（100）; 
} 
）; 
 
}）; 
 
< / script> 
  

解决方案

尝试删除 .inpath 从原始的 hide（）和 hover（）。您还需要使用> （直接后代选择器）进行更具体的选择。

  $（document）.ready（function（）{
 $（'＃menu> ul> li：not（.inpath）ul'）hide（）; 
 $（' #menu> ul> li：not（.inpath）'）。hover（
 
 function（）{
 $（'ul'，this）.slideDown（100）; 
 $（'＃menu li.inpath ul'）。hide（）; 
}，function（）{
 $（'ul'，this）.slideUp（100）; 
 $（'＃menu li.inpath ul'）。show（）; 
}）; 
}）; 
  

http://jsfiddle.net/MGkQC/7/

I'm making a simple dropdown menu in jQuery. And it works fine. I'm having a problem though.

The problem is, that i need to keep the active page dropdown expanded In the example below the sub-menu that has the .inpath parent needs to always stay expanded. If you hover on another menu-item it should show the relevant subpages and when you hover out return to show the active subpages. Any help is greatly appriciated :-)!

My html:

<div id="menu">

            <ul>

                <li><a href="">Hvem</a></li>
                <li><a href="">Hvad</a>
                    <ul>
                    <li><a href="">Produkter</a></li>
                    <li><a href="">Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath"><a href="">Hvordan</a>

                    <ul>

                        <li><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

My jQuery:

 <script type="text/javascript">
        //mouseenter, mouseover, hover
        // mouseleave, mouseout,
    $(document).ready(function () { 
        $('#menu ul li ul').hide();
        $('#menu li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(100);

            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(100);         
            }
        );

    });

        </script>

解决方案

try removing .inpath from the original hide() and the hover(). You also need more specific selects using the > (direct descendant selector).

$(document).ready(function() {
    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu > ul > li:not(.inpath)').hover(

    function() {
        $('ul', this).slideDown(100);
        $('#menu li.inpath ul').hide();
    }, function() {
        $('ul', this).slideUp(100);
        $('#menu li.inpath ul').show();
    });
});

http://jsfiddle.net/MGkQC/7/

这篇关于如果父级活动，则jQuery下拉菜单应该展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！