javascript - 我如何使用 "document.location.href"& 在同一个元素中有一个不激活它的按钮

Question

(我正在开发一个移动响应式网站)

这是列表:

HTML:

                    <li url="http://google.com" class="mainli">NFL 
                        <img src="strokesmenu.png"   class="sub-menu" />
                        <ul class="sports2">
                            <li>Superbowl </li>
                        </ul>
                    </li>

                    <li url="http://google.com" class="mainli">MLB Baseball  
                        <img src="strokesmenu.jpg"   class="sub-menu" />
                        <ul class="sports2">
                            <li>Playoff </li>
                        </ul>
                    </li>
                <li class="mainli"> NBA  
                    <img src="strokesmenu.jpg"   class="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>Finals Playoff </li></a>
                    </ul>
                </li>
                <li class="mainli"> College Basketball  
                    <img src="strokesmenu.jpg"   class="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>March Madness </li></a>
                    </ul>
                </li>
                <li > Boxing  </li>
                <li> College Football  </li>
                <li class="mainli"> Golf   
                    <img src="strokesmenu.jpg"   class="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>British Open</li></a>
                        <a href="#" class="selected"><li>Masters</li></a>
                        <a href="#" class="selected"><li>PGA Championship</li></a>
                        <a href="#" class="selected"><li>US Open</li></a>
                    </ul>
                </li>
                <li class="mainli"> NHL  
                    <img src="strokesmenu.jpg"   class="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>Stanley Cup </li></a>
                    </ul>
                </li>
                <li> MMA   </li>
                <li> UFC   </li>
                <li> Soccer   </li>
                <li> Tennis   </li>
                <li class="mainli"> Horse Racing  
                    <img src="strokesmenu.jpg"   class="sub-menu" />
                    <ul class="sports2">
                        <li>Belmont Stakes</li>
                        <li>Kentucky Derby</li>
                        <li>Preakness Stakes</li>
                    </ul>
                </li>
                <li> Other Sports </li>
            </ul>
        </div> 

还有这几行 onClick jQuery 行:

//first 
$('.sub-menu').click(function(){
        //$('.sports2').slideToggle("slow");
        $(this).parent().find('.sports2').slideToggle("slow");
    })



//second
    $("li").click(function(){
      document.location.href = $(this).attr('url');
    });

“NfL”本身就是一个链接 - 但如果您按下#sub-menu 按钮，您会看到更多带有链接的类别。适用于所有 <li>在我的 html 中。

如果我评论第二个 jQuery 部分 - 它会打开第二个列表(子类别 .sports2)。但链接不起作用。

如果我评论第一个 jQuery 代码 - 我的链接运行良好，但子菜单打不开。

如何在不混合的情况下混合两者？

我尝试取消对它们的注释 - 我的链接工作正常，但是当我单击 #submenu 按钮时，它会扩展一秒钟并立即重定向到 <li url="..."> 的链接

Answer 1

尽量避免不同层次的链接。 (触发哪个级别？li-toplevel 还是 li-lowest 级别？)

为了避免在所有 li 和你的 toplayer 上触发你的链接事件，请尝试在带有类引用的 li 上使用它，就像你对“.sub-menu”所做的那样