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

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> 是内联元素。所以它不会覆盖整个里。为此，请使用 CSS:

.dropdown-menu li {
    position: relative;
}

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

~~并确保您没有在下拉菜单 li 上应用任何填充，在下拉菜单 li a 上应用。~~

关于那个未定义的重定向，有一个 javascript 在它后面工作。 Post放在这里让我看看。

Answer 3

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

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

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

Click on menu item redirects to undefined

html

javascript

css

jquery

padding