单击链接时下拉菜单关闭

Question

当我 click/touch 内部链接时，我的下拉菜单正在关闭。下拉菜单位于弹出式导航菜单内。我正在使用 slideToggle。因此，当您向下滚动页面时，弹出式导航会固定在页面顶部。弹出式导航栏内是一个下拉菜单。这是单击链接时关闭的菜单。 flyMenu、flyNav、flyShop 和 flyShoplist 是涉及的类。如何阻止 flyShopList 关闭并转到所选链接？

编辑 - 对不起，我没能说清楚我的问题。主导航工作正常。它的弹出下拉菜单。所以当我点击 flyMenu 时，flyNav 滑出并保持打开状态。然后当我单击 flyShop 时，flyShopList 滑出，然后当我尝试单击 flyshoplist 内的链接时，没有重定向并且 flyshoplist 关闭。我怎样才能使链接起作用而不关闭菜单？

这是一个 jsfiddle http://jsfiddle.net/adod4ycz/6/

这是 HTML

<div class="menu">Menu</div>
<div class="nav">
    <ul>
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="about.php">About</a>
        </li>
        <li class="shop"><a href="#"><span>+</span>Shop</a>

            <ul class="shopList">
                <li><a href="http://website.com/">website</a>
                </li>
                <li><a href="http://website.com/">Collection</a>
                </li>
                <li><a href="http://website.com/">Dresses</a>
                </li>
                <li><a href="http://website.com/">Rompers</a>
                </li>
                <li><a href="http://website.com/">Jumpsuits</a>
                </li>
                <li><a href="http://website.com/">Leggings</a>
                </li>
            </ul>
        </li>
        <li><a href="http://website.com/">On Sale</a>
        </li>
        <li><a href="wholesale.php">Wholesale</a>
        </li>
        <li><a href="retailers.php">Retailers</a>
        </li>
        <li><a href="contact.php">Contact</a>
        </li>
    </ul>
</div>
<aside>
    <div class="flyMenu">Menu</div>
    <div class="flyNav">
        <ul>
            <li><a href="index.php">Home</a>
            </li>
            <li><a href="about.php">About</a>
            </li>
            <li class="flyShop"><a href="#"><span>+</span>Shop</a>

                <ul class="flyShopList">
                    <li><a href="http://website.com/">New Arrivals</a>
                    </li>
                    <li><a href="http://website.com/">Collection</a>
                    </li>
                    <li><a href="http://website.com/">Dresses</a>
                    </li>
                    <li><a href="http://website.com/">Rompers</a>
                    </li>
                    <li><a href="http://website.com/">Jumpsuits</a>
                    </li>
                    <li><a href="http://website.com/">Leggings</a>
                    </li>
                </ul>
            </li>
            <li><a href="wholesale.php">Wholesale</a>
            </li>
            <li><a href="retailers.php">Retailers</a>
            </li>
            <li><a href="http://website.com/">Contact</a>
            </li>
        </ul>
    </div>
</aside>

这是我的 JS

$(window).scroll(function () {
    if ($(this).scrollTop() > 125) {
        $('aside').addClass('asideMenu');
    } else {
        $('aside').removeClass('asideMenu');
    }
});
$(document).ready(function () {
    //regular nav menu
    $('.menu').click(function () {
        $('.nav').slideToggle("fast");
    });
$('.shop').click(function () {
    $('.shopList').slideToggle(30);
    $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span",   this).text("+");
});
//flyout nav menu
$('.flyMenu').click(function () {
    $('.flyNav').slideToggle("fast");
});
$('.flyShop').click(function () {
    $('.flyShopList').slideToggle(30);
    $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
    return false;
});
});

Answer 1

您需要将 event 传递给操作并添加 event.stopPropagation() 以防止事件冒泡 DOM 并触发父级的侦听器

$('.shop').click(function (event) {
    event.stopPropagation();
    $('.shopList').slideToggle(30);
    $("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});

FIDDLE

单击链接时下拉菜单关闭

Dropdown menu is closing when links are clicked

html

javascript

jquery

drop-down-menu