停用<a> tag of </a> <ul> <a> but not of its associated <li>

Question

My navigation menu looks like this which is generated by wordpress wp_nav_menus function.

<ul id="main">
    <li class="item1"><a href="some links"></a></li>
    <li class="item2"><a href="some links"></a></li>
    <li class="item3 menu-item-has-children" ><a href="some links">Letters</a>
        <ul class="sub-menu">
            <li class="item4" ><a href="some links">A</a></li>
            <li class="item5" ><a href="some links">B</a></li>
            <li class="item6" ><a href="some links">C</a></li>
            <li class="item7 menu-item-has-children" ><a href="some links">Numbers</a>
                <ul class="sub-menu">
                    <li class="item4" ><a href="some links">1</a></li>
                    <li class="item5" ><a href="some links">2</a></li>
                    <li class="item6" ><a href="some links">3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I want to disable the main link that has submenu . In above example "Letters" and "Numbers" and not their associated '<li>' tags links. i tried this.

  $('.menu-item-has-children').click(function(e) {
    e.preventDefault();
});

But it disables all other sub menu too..

Answer 1

试试这个......

  $('.menu-item-has-children > a').click(function(e) {
    e.preventDefault();
});