链接无法在JavaScript下拉菜单中使用

Question

I am a beginner to JavaScript and can't figure out how to get links working within this dd menu. I'm assuming it has something to do with the javascript function closing the dropdown menu wherever you click overriding the links.

HTML

<div id="right_box">
    <div id="wrap">
        <div id="dropdown" class="ddmenu"> User Settings 
            <ul> 
                <li><a href="#">Settings</a></li>
                <li><a href="logout.php">Log Out</a></li>
            </ul> 
        </div> 
    </div>  

JavaScript

<script type="text/javascript">
     $("#dropdown").on("click", function(e){
        e.preventDefault();

        if($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).children("ul").slideUp("fast");
        } else {
            $(this).addClass("open");
            $(this).children("ul").slideDown("fast");
        }
    });
</script>

Answer 1

It happens because you're using e.preventDefault() , remove it.
When you use it you stop the default a action.

demo