Question

I have a drop down menu; when I click on an item I want to show the sub-menu, and hen I click or blur on another menu it should remove the previous sub-menu by removing the drop-down class. But it doesn’t work.

jQuery

$('.menu_item > li ').click(function(){
    $('.menu_item .drop-down').removeClass();
    $(this).find('span').addClass('drop-down');
});

$('.menu_item .drop-down').blur(function(){
    $('.menu_item .drop-down').removeClass();
    return false;
});

HTML

<nav id="menu_wrap" class="container">
    <a href="index.php" class="logo"></a>
    <a href="#" id="select_menu" class="active" onclick="open_menu()">Menu</a>
    <ul class="menu_item">
        <li><input type="text" placeholder="Search in here" class="search"></li>
        <li><a href="#">Top Lists</a></li>
        <li><a href="#">Shops</a></li>
        <li><a href="#">Products</a>
            <span>
            <a href="#">Products</a>
            <a href="#">Products</a>
            <a href="#">Products</a>
            <a href="#">Products</a>
            </span>
        </li>
        <li><a href="Signup.php">Create Account</a></li>
        <li><a href="Login.php">Log in</a></li>
    </ul>
</nav>

Answer 1

I’m sure there must be a cleaner way to do this, but this works for the scenario you described

$(document).ready(function() {

    $(document).click(function(e) {
        var $target = $(e.target);
        $('.menu_item .drop-down').removeClass();
        if ($target.parents().is('.menu_item > li')) {
            $target.parent().find('span').addClass('drop-down');
            if ($target.parent().is('span')) {
                $target.parent().addClass('drop-down');
            }
        }
    });

});​

And the fiddle for completeness