包含子菜单的移动菜单 - 如何将整个<li>标记包裹在<a> tag when having a button inside the </a> </li> <li> <a> that opens the sub-menu</a> </li>

Question

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

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

<a>标记正在包裹<li>整个<li>链接的内容。 问题是当我插入一个图像（子菜单按钮的图像）时，我不能让所有的li被排成一些东西。

这是一个列表项代码：

            <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>

〜＆＃34; NFL＆＃34;通向页面。单击图像时，它会打开子菜单，其中包含指向其他页面的列表项。

解决方法是什么？

这就是它现在的样子：

Answer 1

对您的li元素应用css更改：

li {
    cursor: pointer;
}

使用本机javascript或jquery绑定click函数：（下面的jquery示例）

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

将网址存储在li代码中的自定义属性中：

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