Question

我有以下设计问题。我有一个项目列表，我想让每个第一个li成为可点击的链接。我尝试在每个li中添加一个链接，使其成为块级元素并将其定位为绝对元素，但这不起作用，因为父级和所有li都是为了布局目的而向左浮动。任何帮助将不胜感激，谢谢

<ul style='float:left;width:x>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

   <li>
      <ul>
         <li>Title</li>
         <li>Description</li>
      </ul>
   </li>

</ul>

Answer 1

如果父li有position: relative，您可以将内容置于其中，而不会弄乱父级浮动的方式。

另一个有点不优雅的解决方案是向每个父onclick添加li事件，并使用JavaScript更改URL。另外，将cursor: pointer添加到CSS中，使其看起来像一个链接。但正如我所说，这并不优雅。

Answer 2

您是否认为jQuery是一种选择？它可能不是最好的解决方案，但它会起作用。所以我会像这样装备一些东西：

$("ul li:first-child").bind('click',function(){
    // click event here.
    alert("Boom!");
    $(this).find("li a").trigger('click');
});

我会让你的代码看起来像这样：

<ul>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
    <li>
        <ul>
        <li><a href="#">title</a></li>
        <li>description</li>
        </ul>
    </li>
</ul>

Answer 3

将链接放在li中并使用display:block。不要绝对定位它们。

使块级元素可点击链接

3 个答案: