jquery - 使 LI 元素跟随链接

Question

我有以下标记:

<div class="card">
  <ul>
    <li>Some text</li>
    <li>
      <div class="file">
        <a href="http://www.google.com">Link</a>
      </div>
    </li>
  </ul>
</div>

如果 div.file 中有 anchor ，我希望所有 LI 元素都可以点击。

要访问的链接应该是 anchor 中的链接...我尝试了以下操作:

$(".card li .file:has(a)").click(function () {
  window.location = $("a:first", this).attr("href");
});

这是行不通的。有人可以帮帮我吗？

我有一个 Codepen示例。

更新

我尝试按照建议仅使用 CSS 和 HTML 来执行此操作。我的问题是 LI 的高度可能不同。我希望可点击区域相同。

而且我不能将高度定义为“200px”或类似的东西，因为我不想有底部边距，以防内容没有填满 DIV 内的整个空间。

我创建了以下示例: http://codepen.io/mdmoura/pen/kxKrd

查看第二个 LI 项下不可点击的部分。

Answer 1

更好:

li a, .file {
  height: 100%;
}

http://codepen.io/anon/pen/pFwIj