單擊鏈接后，下拉菜單關閉

Question

單擊/觸摸內部鏈接時，我的下拉菜單關閉。 下拉菜單位於彈出菜單的內部。 我正在使用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("+");
});

小提琴