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中有一个锚，我希望所有LI项都可以点击。

要遵循的链接应该是锚点中的链接...我尝试了以下内容：

$(".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

Answer 2

我认为你误解了方式.has（）有效。

试试这个：

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

注意：由于某种原因在CodePen中不起作用，但如果您执行window.open()而不是document.location.href =

，则无效

Answer 3

这个怎么样：

$(".card li").click(function() {
    var a = $(this).find("div.file a").first();
    if(a) {
       location.href = a.attr("href");
    }
});

Answer 4

您的代码看起来很好。

我认为问题在于您的示例网址。谷歌阻止自己被放入iframe（就像在codepen示例中那样）。如果打开浏览器控制台，则可以看到错误。尝试使用普通URL在codepen中进行测试。

此外，建议使用window.location.href = '';

Answer 5

由于a不一定与li相关，因此您不应将其放在选择器中。只需将点击功能绑定到li，然后点击它就会获得a。

$(".card li").click(function() {
    var link = $(".file a");
    if (link.count) {
        window.location = link.attr("href");
    }
}

Answer 6

按下div.file时会触发它，但不会填充li。在.file周围包装a：has（）：has（a）

试试这个：

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

使LI项目跟随链接

6 个答案: