单击菜单项重定向到未定义

Question

<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>

当我将鼠标悬停在<a> 标签上并单击时 - 一切正常。 但是<a> 并没有涵盖所有<li> 元素（我添加了填充）。当我点击填充区域时，我被重定向到未定义。

如何在不更改现有页面样式的情况下解决此问题（不要删除填充）？

一些难以复制的例子http://jsfiddle.net/v3ng6zqh/

我在代码中几乎找不到的 Js 脚本：

    $(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");
        };
    });
});

Answer 1

您可以向a 元素添加一个内边距，而不是li 内的内边距。稍微调整一下，看起来还是一样的，但a 会覆盖整个li。

Answer 2

<a> 是一个内联元素。所以它不会覆盖整个li。为此，请使用以下 CSS：

.dropdown-menu li {
    position: relative;
}

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

并确保你没有在下拉菜单里应用任何填充，应用在下拉菜单里。

关于未定义的重定向，背后有一个 javascript 工作。把它贴在这里让我看到。

Answer 3

您可以尝试将操作直接绑定到包含a 的li，而不是父li。此外，没有必要检查是否有类open，因为它总是会有它（你在鼠标悬停和绑定鼠标单击时添加它）。试试这个代码：

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