Выпадающее меню jQuery должно расширяться, если родитель активен

Я делаю простое выпадающее меню в 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="">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>

Мой 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>

menu drop-down-menu jquery expand
person Hemil    schedule 03.03.2011    source источник
comment
Может быть, немного не по теме, но вы знаете, что можете использовать overflow:auto в стиле меню DIV и избавиться от очистки DIV, верно?   -  person FarligOpptreden    schedule 03.03.2011
comment
@hunter Я делал это много раз, и это работает для меня? Прочтите эту статью: joelpittet.com/log/2009/03/< /а>   -  person FarligOpptreden    schedule 03.03.2011
comment
@Farlig очень интересно. Узнавайте что-то новое каждый день. Я обязательно попробую этот подход, так как очистка поплавков, как по-старому, всегда беспокоила меня.   -  person hunter    schedule 03.03.2011

Ответы (1)


arrow_upward
1
arrow_downward

попробуйте удалить .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/

person hunter    schedule 03.03.2011
comment
Спасибо за ваш ответ :-) Однако - он должен скрывать активное подменю, когда я наводил курсор на один из других пунктов меню - это выполнимо? - person Hemil; 03.03.2011