jquery - 使用 Foundation 隐藏圆形按钮组中的按钮

Question

我正在使用 Zurb Foundation 5，并且我想使用带有圆形按钮的按钮堆栈。但是，我想隐藏一些按钮。例如，我的代码本质上是

<ul class="round button-group">
  <li><a href="#" class="button tiny">Button 1</a></li>
  <li><a href="#" class="button tiny">Button 2</a></li>
  <li><a href="#" class="button tiny">Button 3</a></li>
  <li><a href="#" class="button tiny">Button 4</a></li>
</ul>

在 Javascript 中，我隐藏按钮。以前，我没有使用按钮组，我可以简单地切换按钮的“a”标签上的“隐藏”类(使用 JQuery)。但是，现在我正在使用按钮组，并且按钮形成一个漂亮的圆形条，如果我隐藏第一个或最后一个按钮，条的外观就会被破坏 - 新的末端不会很好地 flex 。

知道如何隐藏按钮 1，然后让按钮 2(自动？)有漂亮的圆 Angular 吗？

Answer 1

使用 jQuery 的 detach()方法将为您省去一些麻烦。而不是使用 CSS 隐藏按钮分离它们并将元素保存到变量中以便稍后重新附加。 detach() 保留与删除的元素关联的所有 jQuery 数据。

这将使 Foundation 能够完成其工作并保持正确的圆 Angular 。

var first;

// Remove the first element
first = $('ul li:first-child').detach();

// Re-attach the element
first.prependTo('ul');
first = null;

这是一个工作 demo .

替代方案

如果您想使用基于类的方法，您可以执行以下操作:

jQuery

// Toggle the visibility of the first element
$('ul li:first-child').toggle();

// Remove any existing psuedoFirst classes
$('ul li').removeClass('psuedoFirst');
// Assign the psuedoFirst class to the first visible element
$('ul li:visible').eq(0).addClass('psuedoFirst');

CSS

ul.round li.psuedoFirst a  {
  border-bottom-left-radius: 1000px !important;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 1000px !important;
  border-top-right-radius: 0px;
}

这是一个工作 demo .