更改悬停功能以切换功能会中断链接答案

【问题标题】：Changing hover function to toggle function breaks links更改悬停功能以切换功能会中断链接
【发布时间】：2018-04-27 15:35:35
【问题描述】：

我有一个下拉菜单，当前在悬停时显示下拉无序列表，它们是链接列表。悬停对用户来说是个问题，我想将其更改为“点击”或“切换”。这是网站中当前的代码：

 $("#main_nav .dropdown").hover(function() { 
             $('.dropdown-menu', this).fadeIn("fast"); 
             $('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
             $(this).addClass('active');
        },
        function() 
            { $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
            });

如果我将 .hover 切换为 .toggle，下拉菜单会按照我的预期工作。问题是它现在破坏了我的链接。当我点击它们时，它们什么也不做，也无处可去。这是 HTML：

<ul class="nav_main">
        <li class="active"><a href="/#top">Home</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Decisions <b class="caret"></b></a>                      
            <ul class="dropdown-menu mega-menu" id="decisions">
                <li class="mega-menu-column">
                    <ul>
                        <span>
                            <li><a href="https://www.canlii.org/en/sk/skca/">Our Decision on CanLII</a></li>
                            <li><a href="https://scc-csc.lexum.com/scc-csc/en/nav.do">SCC Decisions</a></li>
                            <li><a href="https://scc-csc.lexum.com/scc-csc/scr/en/nav_date.do">Canada Supreme Court Reports (PDF)</a></li>
                            <li><a href="https://app.vlex.com">vLex Canada Open</a></li>
                            <li><a href="https://library.lawsociety.sk.ca/databasespub/digest2008.htm">Sask Cases Judicially Considered</a></li>
                        </span>
                        <span>
                            <li><a href="https://decisions.fct-cf.gc.ca/fc-cf/en/nav.do">Federal Court</a></li>
                            <li><a href="http://soquij.qc.ca/fr/services-aux-citoyens/english-translation">Quebec (translated decisions)</a></li>
                            <li><a href="https://decision.tcc-cci.gc.ca/tcc-cci/en/nav.do">Tax Court of Canada</a></li>
                        </span>
                        <span>
                            <li class="list-heading">Tribunals</li>
                            <li><a href="https://www.canlii.org/en/sk/skaia/">Automobile Injury Appeal Commission</a></li>
                            <li><a href="https://www.canlii.org/en/sk/sklss/">Law Society of Saskatchewan</a></li>
                            <li><a href="https://www.canlii.org/en/sk/skla/">Labour Arbitration Awards – Sask</a></li>
                            <li><a href="https://www.canlii.org/en/sk/sklrb/">Sask LRB (CanLII)</a></li>
                            <li><a href="http://www.sasklabourrelationsboard.com/Decisions-Reasons">Sask LRB</a></li>
                        </span>
                    </ul>
                </li>
            </ul>

我的这个简单的代码切换导致链接完全停止工作，有什么容易解释的原因吗？

提前致谢！

【问题讨论】：

另外，如果我右键单击任何链接并“在新标签页中打开”，链接就会正常打开。

标签： javascript jquery html drop-down-menu html-lists

【解决方案1】：

我无法使用您提供的代码精确地重现问题，但我确实在单击某些链接时发现了问题。

从ul 中删除无效的span 元素似乎已经纠正了观察到的问题。

尝试从ul 中删除那些span 标记。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Allowed child elements of ul

【讨论】：

【解决方案2】：

我的猜测是您的 .toggle 正在劫持整个容器的 click 事件。因此，当您单击链接时，它会切换菜单，而不是触发链接的默认单击。您可以尝试停止链接上的传播，这样它就不会触发父菜单上的点击事件： https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

【讨论】：

在代码中，您究竟会尝试在哪里停止事件？
在a 标签上。类似于： $('.mega-menu-column a').on('click', function(event) { event.stopPropagation() }