Question

我试图在bootstrap中的列表视图中获取一个按钮以获取两个不同的链接，它总是在列表视图链接之后，而不是按钮链接，如果我按下按钮。我该如何实现这一目标？

<a href="foo.html" class="list-group-item">
    <p>This links somewhere different than the button</p>
    <button href="bar.html" class="btn btn-success">Example</button>
</a>

Answer 1

使用Bootstrap似乎并不容易实现，但是一些调整可以让我们得到我们想要的东西。主要问题是嵌套锚点不是真正有效的HTML。但是，我们可以通过绝对地将链接定位在另一个链接上来实现相同的结果。

看看这个JS Bin：

http://jsbin.com/febivi/2/

总结：

将新类添加到将定义新容器的列表组中：

  <ul class="list-group action-list-group">
    <li class="list-group-item">
      <a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
      <a class="btn btn-sm btn-default" href="http://google.com">Go</a>
    </li>
    <li class="list-group-item">
      <a class="list-group-link" href="http://stackoverflow.com">Cras justo odio</a>
      <a class="btn btn-sm btn-default" href="http://google.com">Go</a>
    </li>  
  </ul>

主要链接是“.list-group-link”，次要链接是“.btn”操作。

接下来，我们将一些CSS添加到样式list-group-item的action-list-group内部：

.action-list-group {
  position: relative;
}

/* remove the list group padding since our nested anchor tag will now have it */
.action-list-group .list-group-item {
  padding: 0;
}

.action-list-group .list-group-item > a.list-group-link {
  display: block;
  /* inherit from .list-group-item */
  padding: 10px 15px;
  color: #555;
}

/* re-add the link styling */
.action-list-group .list-group-item > a.list-group-link:hover {
  background: #f5f5f5;
  text-decoration: none;
}

.action-list-group .btn {
  position: absolute;
  right: 5px;
  margin-top: 5px;
  top: 0;
}

如果您使用Sass version of Bootstrap，则表示“继承”，您可以使用sass的@include或@extend来包含与bootstrap的.list-group-item > a相同的样式。

Answer 2

您也可以使用javascript解决方案。一个好处是，您可以将您的按钮元素放在列表组的流程中。

<强> HTML：

<a href="foo.html" class="list-group-item">
    <p>This links somewhere different than the button</p>
    <button data-href="bar.html" class="btn btn-success">Example #1</button>
</a>

<强> JQUERY：

$('.list-group-item').on('click', function (event) {
    event.preventDefault();
    $target = $(event.target);
    if ($target.is('button')) {
        window.location=$target.data('href');
    } else {
        window.location=$target.closest('a').prop('href');
    }
});

基本上，单击处理程序可以使用event.preventDefault()来阻止list-group-item锚标记的正常行为。然后使用event.target，您可以获取调度事件的元素。如果目标是一个按钮，则检索其data属性并将window.location设置为该属性。否则，jQuery closest()方法用于查找最近的锚标记，并使用其href值来设置window.location。在jQuery中，最接近的方法以当前元素（可能是锚本身或其任何非按钮元素的祖先）开始，然后从那里向上移动。

另请注意，由于button元素没有href属性，因此本示例使用data属性存储链接引用。

列表视图内的引导按钮不起作用

2 个答案: