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

您可以在li元素中添加填充，而不是a内的填充。稍微调整它看起来会一样，但a会涵盖整个li。

Answer 2

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

.dropdown-menu li {
    position: relative;
}

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

~~并确保您不在下拉菜单中应用任何填充，请在下拉菜单中应用。~~

关于那个未定义的重定向，它背后有一个javascript工作。将它发布在这里以便我可以看到。

Answer 3

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

open

单击菜单项重定向到undefined

3 个答案: