Question

（我正在移动应答网站上工作）

这是清单：

enter image description here

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');
    });

＆＃34; NFL＆＃34;是一个链接本身 - 但如果您按＃子菜单按钮，您有更多类别与链接。适用于我的html中的所有<li>。

如果我评论第二个jQuery部分 - 它会打开第二个列表（子类别.sports2）。但这些联系不起作用。

如果我评论第一个jQuery代码 - 我的链接工作正常，但子菜单不会打开。

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

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

的链接

Answer 1

尽量避免不同级别的链接。（哪个级别将被触发？li-toplevel或li-low level？）

在所有li上触发你的链接事件的Instaid也是你的玩家，尝试在类似参考的li上使用它，就像你为'.sub-menu'所做的那样

Answer 2

当您点击.sub-menu标记内的链接或<li>时，您还要点击li本身（请查看示例http://jsfiddle.net/op02x1qn/并尝试点击链接）

因此，其中一个选项是获取您想要点击的项目的点击事件。您可以像这样将文本包装在li内（并将其css设置为父元素的全宽等）：

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

和JS：

$('.mainli-text').on('click',function(e){
   document.location.href = $(this).data('url');
});

现在当您点击父span.mainli-text内的新li以外的内容时，它将拥有自己的点击事件。

我如何使用＆＃34; document.location.href＆＃34; ＆安培;在同一个元素中有一个不激活它的按钮

2 个答案: