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("+");
});

FIDDLE

单击链接时，下拉菜单将关闭

1 个答案: