Ошибка расширения меню jQuery

Я закодировал меню навигации, в котором есть вложенные раскрывающиеся списки - я закодировал меню, чтобы они скользили вниз при наведении, и это работает нормально.

Однако есть также ссылка «показать все», которая при нажатии раскрывает все подменю и применяет новый класс к контейнеру, чтобы дополнить меню.

Щелчок расширяет меню, но затем щелчок во второй раз изменяет внешний вид, как и должен, на долю секунды, удаляя класс, как если бы он снова запускал функцию. Мой код ниже - любая помощь будет принята с благодарностью! Энди

// == MENU SHOW ALL TOGGLE
// show pointer
$('#menu li#show-all').hover(function(){
    $(this).css({'cursor' : 'pointer'});
});
$('#menu-container').addClass('show-single');

function toggleheight(){
    if ($('#menu-container').hasClass('show-single')) {
        $('#menu li').not('#show-all').fadeOut(function(){

            $('#menu').animate({
                height : '300px'
            }, function(){
                $('#menu-container').removeClass('show-single').addClass('show-all');
                $('#menu li').not('#show-all').fadeIn();
            });
        });
    }else {
        $('#menu li').not('#show-all').fadeOut(function(){
            $('#menu-container').removeClass('show-all').addClass('show-single');
            $('#menu').animate({
                height : '16px'
            }, function(){
                $('#menu li').not('#show-all').fadeIn();
            });

        });
    }
}

$('#menu li#show-all').click(function(){
        $(toggleheight);
});

РЕДАКТИРОВАТЬ: расширение меню, наведение курсора на ссылку, затем перемещение назад и нажатие на ссылку «Показать все» действительно возвращает меню, как и должно быть, однако щелчок по ссылке «Показать все» один раз, чтобы развернуть еще раз, чтобы сжаться без перехода, похоже, повторно запускает функции


navigation toggle jquery jquery-animate
person tbwcf    schedule 07.01.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я решил не копаться в вашем коде и пытаться исправить его, потому что я думаю, что есть гораздо лучший подход к созданию навигационных меню с помощью простого плагина jQuery. Однако на самом деле это не поможет вам решить вашу проблему с вашим кодом, но, надеюсь, вы все равно найдете это полезным.

Итак, вот что я придумал.

HTML:

<ul class="nav-menu">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a>
                <ul>
                    <li><a href="#">Subsubmenu 1</a></li>
                    <li><a href="#">Subsubmenu 2</a></li>
                    <li><a href="#">Subsubmenu 3</a></li>
                    <li><a href="#">Subsubmenu 4</a></li>
                </ul>
            </li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
        </ul>
    </li>
</ul>

Код плагина:

(function($){

    function traverseItems($items) {
        $items.each(function(){
            var $item = $(this),
                $submenu = $item.children("ul").hide();
            if ($submenu.length) {
                $item.children("a").click(function(){
                    $submenu.toggle();
                    return false;
                }).append(" \>");
                traverseItems($submenu.children("li"));
            }
        });
    }

    $.fn.navMenu = function (options){
        var defaults = {
            showAllToggle: true
        };
        options = $.extend({}, defaults, options);

        return this.each(function(){
            var $this = $(this)
                    .addClass("nav-menu"),
                $items = $this.children("li");

            traverseItems($items);

            if (options.showAllToggle) {
                $showAll = $("<a></a>")
                    .attr("href", "#")
                    .addClass("show-all")
                    .text("Toggle all")
                    .toggle(function(){
                        $this.find("ul").show();
                        return false;
                    }, function(){
                        $this.find("ul").hide();
                        return false;
                    })
                    .wrap("<li></li>")
                    .parent()
                    .prependTo($this);
            }
        });
    };

})(jQuery);

Использование:

$(function(){
    $(".nav-menu").navMenu();
});

Вы можете увидеть все это в действии на jsFiddle.

Я могу уточнить этот ответ и разрезать его на части, если потребуется. Если у кого-то есть какие-либо предложения или идеи о том, как это можно улучшить, я весь внимание.

person mekwall    schedule 07.01.2011
comment
@tbwcf, если вы можете собрать тестовый пример на jsFiddle с вашим кодом, это очень поможет. Я бы по-прежнему рекомендовал вам использовать плагин jQuery для этого. - person mekwall; 08.01.2011
comment
Спасибо, Маркус, я разместил макет jsFiddle здесь: jsfiddle.net/tbwcf/EKLJx Буду признателен за любую дальнейшую помощь :) - person tbwcf; 11.01.2011