0

Всем привет.

Возник такой вопрос, который никак не могу понять как сделать.

Есть меню типа

<ul>
        <li>
                <a href="page.php">Меню 1</a>
                <ul>
                        <li><a href="page.php?action=add_news">Меню 2</a></li>
                        <li>
                                <a href="page.php?action=edit_news">Меню 3</a>
                                <ul>
                                        <li><a href="page.php?action=menu">Меню 5</a></li>
                                        <li><a href="anypage.php">Меню 6</a></li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li><a href="page.php?c_id=5">Меню 4</a></li>
</ul>

У всех li, если открыта страница, например "Меню 5", добавляется просто класс active

<ul>
        <li class="active">
                <a href="page.php">Меню 1</a>
                <ul>
                        <li><a href="page.php?action=add_news">Меню 2</a></li>
                        <li class="active">
                                <a href="page.php?action=edit_news">Меню 3</a>
                                <ul>
                                        <li class="active"><a href="page.php?action=menu">Меню 5</a></li>
                                        <li><a href="anypage.php">Меню 6</a></li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li><a href="page.php?c_id=5">Меню 4</a></li>
</ul>

Т.е. добавляем active первому li, li у которого подменю и li уже конечный.

Никак не могу понять, как сделать на jQuery, что определяло по строке браузера какой пункт подменю открыт и всем парентам li добавляло active. видел такое в каком-то tree меню, но не помню в каком.

На php не получается просто такое сделать. Там генерируется рекурсивно дерево. И как проверить какой пункт меню является чьим потомком не получается сделать.

Может кто-то уже делал подобное? Буду благодарен за помощь.

1
  • Спасибо @RubaXa за помощь!
    – drop_off
    24 мая 2013 в 6:21

1 ответ 1

2

На глаз так:

$.selectMenu = function (el, href){
    if( href === location ){
        href = href.pathname + href.search
    }

    var search = href.split('?')[1] || '';
    if( search ){
        search = '?'+search;
    }

    $(el)
        .find('.active')
            .removeClass('active')
            .end()
        .find('a[href~="'+href+'"]')
            .filter(function (){
                return this.search === search;
            })
                .parents('li')
                    .addClass('active');
    ;
};

$.selectMenu("#menu", location);

// или

$.selectMenu("#menu", "page.php");

Demo — http://jsfiddle.net/3NecU/

8
  • Большое спасибо! Работает! Только возникла проблема, про которую забыл описать. К примеру мы на странице page.php?action=menu, и эта ссылка прописана в меню. А мы перешли, к примеру на подстраницу page.php?action=menu&menu_id=1 Т.е. у нас добавилось в ссылке &menu_id=1. Хотя по прежнему нужно выделять page.php?action=menu. Можно что-то тут сделать? Т.е. если начальная часть строки совпадает, то все равно подсвечивать.
    – drop_off
    23 мая 2013 в 15:01
  • 1
    Можно, но тогда $.selectMenu("#menu", "page.php") подсветит всё
    – RubaXa
    23 мая 2013 в 15:35
  • А если до первого & в строке? Т.е. получается, что до второго параметра page.php?параметр=1&параметр=2
    – drop_off
    23 мая 2013 в 15:41
  • 1
    Да виноват jsfiddle.net/3NecU/2
    – RubaXa
    23 мая 2013 в 16:54
  • 1
    ДА, вы правы, забыл сохранить, попробуйте jsfiddle.net/3NecU/3
    – RubaXa
    23 мая 2013 в 17:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.