Wordpress drop-down-menu open on click

Question

I'm trying to make a wordpress drop-down menu that opens on click. Thing is it should stay open when you select a post and the page loads that post. Problem is I'm using custom menu item link which anchor links to nothing ("#") just to make them clickable. The menu opens when I click the "Clickable 2nd level title item", but links on the "3rd level posts" don't work but instead the menu closes when I click them.

HTML:

<li id="menu-item-272" class="main menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-272"><a href="#">Main menu title item</a>
<ul class="sub-menu" style="display: block;">
    <li id="menu-item-740" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-740"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-741" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-741"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-742" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-742"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-743" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-743"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-744" class="second bez menu-item menu-item-type-custom menu-item-object-custom menu-item-744"><a href="#">Clickable 2nd level title item</a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-288" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-288"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-290" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-290"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-292" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-292"><a href="http://xyz.com">Post 3rd lvl</a></li>
    </ul>
</li>
</ul>
</li>

jQuery:

$('#menu-header ul.sub-menu li.second:not(".third")').toggle(function() {
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(50).show("slow");
    }, function(){
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(150).animate({ "height": "hide", "opacity": "hide" }, 400 );
    });

Answer 1

Here you go, used this answer. I've simplified the code for clarity and updated your fiddle as well.

$('ul.sub-menu').children('.second').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.third').click(function (event) {
    event.stopPropagation();
    console.log('hello!');
    return false;
});