Question

我有一个下拉菜单，当前显示悬停时的下拉列表无序列表，这些列表是链接列表。 Hover对于用户来说是有问题的，我想要更改为＆＃39;点击＆＃39;或者＆＃39;切换＆＃39;以下是该网站目前的代码：

 $("#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>

是否有任何容易解释的原因，我的代码中这个简单的开关导致链接完全停止工作？

提前致谢！

Answer 1

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

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

尝试从ul中删除这些yarn add enzyme react-test-renderer enzyme-adapter-react-16 --dev代码。

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

Allowed child elements of ul

Answer 2

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

将悬停功能更改为切换功能会中断链接

2 个答案: