jQuery при щелчке по элементу главного меню, если есть дочернее переключаемое подменю, в противном случае открывается ссылка

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

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

Это HTML:

<div class="menu-primary" style="display: block;">
        <ul class="v-list" id="menu-menu-1">
            <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-23" id="menu-item-23"><a href="somepath.php">Browse by Type</a></li>

            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-30" id="menu-item-30">
                <a>aaaa</a>

                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21" id="menu-item-21"><a href="somepath.php">Browse by Author</a></li>
                </ul>
            </li>

            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22" id="menu-item-22"><a href="somepath.php">Browse by Country</a></li>

            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20" id="menu-item-20"><a href="somepath.php">About</a></li>
        </ul>
    </div>

Это код jquery:

$('.menu-item').click(function(event) {
    if($(this).closest("li.menu-item").children("ul.sub-menu").length)
        {
            $('.sub-menu').slideToggle('fast');
        }
        else {
            var url = $(this).closest("li.menu-item").attr('href');
            window.open(url);
        }
        return false;
    });

menu jquery contains items
person Adrian M.    schedule 11.06.2014    source источник
comment
jsfiddle.net/DcG5R работает..??   -  person Bhavik    schedule 11.06.2014
comment
Получилось, спасибо :)   -  person Adrian M.    schedule 11.06.2014

Ответы (2)


arrow_upward
2
arrow_downward

Перемещение return: false; должно сделать это, а затем полагаться на поведение якоря по умолчанию, чтобы продолжить и изменить target на якоре. скрипка

$('.menu-item').click(function(event) {
    if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0)
    {
        $('.sub-menu').slideToggle('fast');
        return false;
    }            
});
person Last1Here    schedule 11.06.2014

arrow_upward
1
arrow_downward

Есть пара проблем с вашим кодом.

Во-первых, ваш селектор $('.menu-item') уже выбирает элементы <li>, поэтому вызов $(this).closest('li.menu-item') является излишним; $(this) соответствует точно такому же элементу — вы можете удалить все эти вызовы .closest() из своего кода.

Во-вторых, атрибут href находится в элементе <a>, а не в элементе <li>, из которого вы в данный момент пытаетесь его получить. Измените эту строку на:

var url = $(this).find("a").attr('href');
person Anthony Grist    schedule 11.06.2014
comment
Спасибо за советы, я улучшил код, и теперь он работает, спасибо :) - person Adrian M.; 11.06.2014