为什么我的锚标签不起作用？

Question

I have made a drop down menu using un-ordered lists, list items, jQuery and CSS. None of the menu items (which are anchors) work when I click on them. All that happens when I click the anchor is the menu disappears. If I right click an anchor and then open it in a new tab, it does redirect as I expect. Here is a jFiddle that shows my code and the issue at hand. Note that the menu is somewhat hard to open, you have to click the bottom portion of the icon. If anyone could advise as to why the anchors do not open properly it would be greatly appreciated.

HTML:

<span class="menu_item" id="settings">
    <ul>
        <li>
            <a href="#" onclick="return false;">&#9788;</a>
            <ul>
                <li>
                    <a href="/admin.php">Admin Center</a>
                </li>
                <li>
                    <a href="/login/process.php">Logout</a>
                </li>
            </ul>
        </li>
    </ul>
</span>

Answer 1

The return false; you have in settings_open does two things, one of which is cancelling the default action (following the link). Remember that clicks bubble from descendant elements up to ancestor elements.

If you change the return false; to event.stopPropagation() instead, you don't prevent the default, and the links work. (There's also no reason to return true from event handlers.)

Fiddle

function settings_open(event){

    settings_canceltimer();
    settings_close();
    var submenu = $(this).find('ul');

    if(submenu){
        ddmenuitem = submenu.css('visibility', 'visible');
        event.stopPropagation(); // <== Change here
    }

    // Removed return true here
}