Ли родительский элемент не выбран при выборе дочернего элемента в jquery

0

У меня есть код записи, чтобы сделать li активным на основе url. Он работает нормально, но он не работает на дочернем li.It сделать child li активным, пока я хочу, чтобы верхний ли должен быть активным, а не дочерним. Мой код ниже:

 <script type="text/javascript">
jQuery(function () {
    setNavigation();
});

function setNavigation() {


// this portion code make li active on url basis

    var pathname = window.location.pathname;
    path = pathname.replace(/\/$/, "");
    path = decodeURIComponent(path);

    var value = jQuery(location).attr('href');
//   value  = value.replace('.html', ''); alert(value);
    jQuery(".flexy-menu a").each(function () {
        var href = jQuery(this).attr('href'); 
        if (value === href) { 
            jQuery(this).closest('li').addClass('active');
        }
    });

// this is code for child li but only first code works

    jQuery('.flexy-menu').children('li').click(function(){ 
    jQuery(this).parent('li').addClass('active');
    });

}</script>

Мой HTML выглядит так:

<ul class="flexy-menu orange">
            <li style=""><a href="http://example.com/">Home</a></li>
            <li style=""><a href="JavaScript:void(0)">Collection</a>
<ul style="">            <li><a href="http://example.com/my-secret-garden.html">My Secret Garden </a></li>
     <li><a href="http://example.com/legend.html">Legend</a></li></ul>
</li>

            <li class="active" style=""><a href="http://example.com/artisans">Artisans</a></li>
            <li style=""><a href="http://example.com/contacts">Contact </a></li>
          </ul>
Теги:

2 ответа

1
Лучший ответ

Вместо использования родителями .closest():

jQuery(this).closest('li').addClass('active');

и поставьте это в документе готов:

jQuery(function () {
    setNavigation();
    jQuery('.flexy-menu').find('li').click(function(){ 
        jQuery(this).closest('li').addClass('active');
    });
});

Здесь я немного изменил свой селектор с помощью .find() вместо .children(), потому что .find() ищет большой ребенок, и если вы хотите перейти к родительскому, используйте .closest().

Я пишу код, чтобы сделать li активным по URL-адресу

Хорошо! то вы можете сделать это:

$('a[href*="'+ path +'"]').parents('li').addClass('active');

Это должно работать:

Для всех вас просто нужно сделать это только, никаких дополнительных функций не требуется:

jQuery(function () {
    var path = window.location.pathname;
    $('a[href*="'+ path +'"]').parents('li').addClass('active');
    jQuery('.flexy-menu').find('li').click(function(){ 
        jQuery(this).closest('li').addClass('active');
    });
});
Поделиться
  • 0
    Спасибо за ваш повтор, но не работающий. Пока выбираете child li и делайте его активным.
  • 0
    Одна вещь, которую я забыл упомянуть, что страница загружается после каждого клика. Так что я думаю, что событие щелчка здесь не работает. Мы должны проверить на основе URL.
Показать ещё 5 комментариев
0 
jQuery('.flexy-menu > li').click(function(e){    
jQuery(this).closest('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});

Демо - версия:

http://jsfiddle.net/hqPQu/

Поделиться
  • 0
    Спасибо Одна вещь, которую я забыл упомянуть, что страница загружается после каждого клика. Так что я думаю, что событие щелчка здесь не работает. Я должен проверить на основе URL, как для родителя, которого я сделал.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню