Click on menu item redirects to undefined

<li class="dropdown navbar-li col-md-3 col-sm-3">
    <a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>index.aspx" class="dropdown-toggle navPadding">PUBLISHERS</a>
    <ul class="dropdown-menu col-md-12 col-sm-12  navbar-submenus"role="menu">
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>Getting_Rated/Index.aspx">Getting a Game Rated</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>ratings/index.aspx">Rating Certificate Updates</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>ArcManual.aspx">Advertising &amp; Marketing <BR />Guidelines</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>Library.aspx">Downloads</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>ratings/enforcement.aspx">Enforcement</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>about/contact.aspx">Contact ESRB</a></li>
        <li><a href="<%= ESRBOrg.Core.Common.PublisherConfigurationManager.Navigation %>PreClearance.aspx">ARC Pre-Clearance</a></li>
    </ul>
</li>

When I hover on <a> tag and click - everything works good. But <a> doesn't cover all <li> element (I add padding). And when I click on padding area I am redirected to undefined.

How can i fix this without changing my existing style of page (don't remove padding)?

Some hardly reproduced example http://jsfiddle.net/v3ng6zqh/

Js script that i hardly find in code :

    $(document).ready(function () {
    $('li.dropdown').hover(function () {
        $(this).addClass("open");
    });

    $('li.dropdown').mouseleave(function () {
        $(this).removeClass("open");
    });

    $('li.dropdown').off("click");
    $('li.dropdown').on("click", function(e) {
        var navigate = $(this).hasClass("open");
        if (navigate) {
            window.location = $(this).find("a[data-toggle='dropdown']").prop("href");
        };
    });
});

Answers


You can try to bind the action to the li containing the a directly instead of the parent li. Also, it would be unnecessary to check if has class open since it always will have it (you're adding it on mouse-hover and binding mouse-click). Try this code:

$('ul.dropdown-menu li').on("click", function(e) {
  window.location = $(this).find("a").prop("href");
});

Instead of a padding inside the li, you could add a padding to the a element. With a little bit of tweaking it would look the same, but the a would cover the entire li.


<a> is an inline element. So it'll not cover the whole li. To do that, use this CSS:

.dropdown-menu li {
    position: relative;
}

.dropdown-menu li > a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And make sure you don't apply any padding on dropdown-menu li, apply on dropdown-menu li a.

About that undefined redirect, there is a javascript working behind it. Post it here so that I can see.


Need Your Help

Multiple dropdownlist

c# asp.net selectedindexchanged

i have 4 dropdownlist. when i change the 1st dropdown, onselectindexchanged i need to change all the remaining dropdown values.

How to convert FileInfo into FileInfo

c# .net string linq system.io.fileinfo

I have been working on a program that requires a different approach to finish a job using try and catch nested within another try/catch.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.