Home/ Questions/Q 6824045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:51:20+00:00

So I made this super stripped down version of a html css jquery navigation

  • 0

So I made this super stripped down version of a html css jquery navigation menu, and given the code below, it handles submenu items as if it were the containing li. I suppose I can understand that it see the submenu ul as part of the li. The question becomes how do I separate that behavior, such that the submenu links will actually be followed and not preventDefault’ed.

<html>
<head>
<style type="text/css">
    #content ul {margin:0;}
    #content ul li {float:left; background:#000; list-style:none;}
    #content ul li a {display:block; text-decoration:none; padding:10px 40px;}
    #content ul li ul {position:absolute; padding:0;}
    #content ul li ul li {float:none; background:#ccc;}
</style>
</head>

<body>
<div id="content">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li>
            <a href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a href="#">4</a></li>
    </ul>
</div>          
</body>
</html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$('#content ul li').has('ul').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});
</script>

Edit: I want all the top level links and submenu links to work as normal. The only things I am trying to manipulate are the top level li’s that have a submenu.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you change your initial selector so it targets the first child anchors of ‘content’ like this:

    $('#content > ul > li > a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});

    It will work. I would recommend simply adding a css class to each anchor tag you want to bind the click event to instead. That will be much cleaner and will be less likely to break when the markup changes.

    <div id="content">
    <ul>
        <li><a class="mainNav" href="#">1</a></li>
        <li><a class="mainNav" href="#">2</a></li>
        <li>
            <a class="mainNav" href="#">3</a>
            <ul>
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
            </ul>
        </li>
        <li><a class="mainNav" href="#">4</a></li>
    </ul>
</div>

    and 

    $("#content .mainNav").click(function(e) { e.preventDefault(); });

    Update

    Your original answer was really close. The issue was that you were selecting all descendant li elements. I added the children selector to fix this.

    $('#content ul li').has('ul').children('a').click(function(e) {
    /* code to show/hide submenus */

    console.log(e);
    e.preventDefault();
});
    • 0