带有子菜单的移动菜单 - 当在 <lid> 中有一个打开子菜单的按钮时，如何将整个 <li> 标记包裹在 <a> 标记中答案

【问题标题】：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带有子菜单的移动菜单 - 当在 <lid> 中有一个打开子菜单的按钮时，如何将整个 <li> 标记包裹在 <a> 标记中
【发布时间】：2014-12-02 18:20:02
【问题描述】：

我有一个移动菜单 - 其中一些列表项还有另一个子菜单，其中包含在单击图像时应打开的列表项（查看本文底部的图像）。我想让整个<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>

~ "NFL" 指向一个页面。单击图像时，它会打开子菜单，其中包含指向其他页面的列表项。

解决办法是什么？

这就是它现在的样子：

【问题讨论】：

你不应该用a 包裹li。应该反过来。
除此之外，我仍然无法理解您的问题是什么。您能否更清楚地解释您的问题以及您的期望？
好的。给我一两分钟。
类似这样的东西：jsfiddle.net/abhitalks/5wwakq4g/1。这是一个快速但粗糙的小提琴。希望你能明白。您可以在代码中通过 Javascript 触发子菜单。
查看这个更新的：jsfiddle.net/abhitalks/5wwakq4g/3 您将看到链接的黄色背景以更好地可视化它。

标签： html css css-selectors

【解决方案1】：

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

li {
    cursor: pointer;
}

使用原生javascript或jquery绑定点击功能：（jquery示例如下）

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

将 URL 存储在 li 标签中的自定义属性中：

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

【讨论】：

我有一大堆导致不同 URL 的 li-s。我不认为这是一个解决方案。如果我在每一个 li 上都使用它，它就不会有效。
我很快就会在我的办公桌上尝试一下。 tnx.