CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
badsyntax
badsyntax

Reputation: 311

Dropdown menu is closing when links are clicked

my dropdown menu is closing when I click/touch the inside links. The dropdown menu is inside a flyout navigation menu. I am using slideToggle. So when you scroll down the page the flyout navigation apears fixed to the top of the page. Inside the flyout nav is a dropdown menu. This is the menu that is closing when links are clicked. The flyMenu, flyNav, flyShop and flyShoplist are the classes involved. How can I stop flyShopList from closing and go to the chosen link?

edit - Im sorry I failed at making my question clear. the main navigation works fine. its the flyout dropdown. so when I click on the flyMenu the flyNav slides out and stays open. then when I click flyShop the flyShopList slides out, then when I try to click the links inside the flyshoplist there is no redirect and the flyshoplist closes. how can I get the links to work and not close the menu?

Here is a jsfiddle http://jsfiddle.net/adod4ycz/6/

Here is the 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>

Here is my 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;
});
});

Upvotes: 0

Views: 407

Answers (1)

jmore009
jmore009

Reputation: 12923

You need to pass an event to the action and add event.stopPropagation() to prevent the event from bubbling up the DOM and triggering a parent's listener

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

FIDDLE

Upvotes: 1

Related Questions