带有子菜单的移动菜单 - 如何使整个< li>标签包裹在< a>标签，当在< li>打开子菜单 [英] Mobile menu with a sub-menu - How to make the whole <li> tag wraped in an <a> tag when having a button inside the <li> that opens the sub-menu

问题描述

我有一个移动菜单 - 其中一些列表项目有一个子菜单列表项目，应该打开时，抓住图像（查看图像在这篇文章的底部）。
我想让整个< li> 可点击。
一个没有任何子菜单的简单代码部分的示例：

I have a mobile menu - which some of it's list items have an other sub-menu with list items that should open when clicing the image (view image in the bottom of this post). I want to make the whole <li> clickable. an example for a simple code part without any sub-menu:

            <a href="#"><li> Boxing </li></a>

< a> < li> 是什么使整个< li> 链接。
问题是当我插入一个图像（图像的子菜单按钮），我不能得到所有的李被衬里的东西。

the <a> tag is wrapping the <li> what makes the whole <li> a link. The problem is when I have an image inserted (image for the submenu button), I cant get all the li to be lined to something.

这是一个列表项代码：

            <a href="#" >
                <li>NFL 
                    <img src="strokes_for_menu.png"  id="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected">
                            <li>Superbowl</li>
                        </a>
                    </ul>
                </li>
            </a>

〜NFL会转到页面。当点击图像时，它会打开带有导向其他页面的列表项的子菜单。

~ "NFL" leads to a page. When clicking on the image it opens the sub-menu with list items that lead to other pages.

此解决方案是什么？

现在：

>

推荐答案

对 li 元素应用css更改：

Apply a css change to your li elements:

li {
    cursor: pointer;
}

使用本地javascript或jquery绑定点击函数：

Use native javascript or jquery to bind the click functions: (jquery example below)

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

将网址存储在 li 标记：

<li url="http://example.com"></li>
<li url="http://test.com"></li>

这篇关于带有子菜单的移动菜单 - 如何使整个< li>标签包裹在< a>标签，当在< li>打开子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！