使用 Foundation 隐藏圆形按钮组中的按钮答案

【问题标题】：Hide button in round button-group with Foundation使用 Foundation 隐藏圆形按钮组中的按钮
【发布时间】：2015-09-15 20:23:29
【问题描述】：

我正在使用 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）。但是，现在我使用了一个按钮组，并且按钮形成了一个漂亮的圆形条，如果我隐藏第一个或最后一个按钮，条形的外观就会被破坏 - 新的末端不会很好地弯曲。

知道如何隐藏按钮 1，然后让按钮 2（自动？）有漂亮的圆角左角吗？

【问题讨论】：

Foundation 中的弧形按钮使用::first-child 和::last-child。因此，如果您删除任何项目，它看起来很光滑，有圆角。也许您可以选择从字面上删除未使用的按钮并在需要时使用 JS 重新插入它们。
谢谢 - 这会奏效。但是，在第二次创建按钮后必须重新绑定按钮感觉有点难看。
任何其他选项都涉及扩展或编辑 Foundation CSS 以分别使用 .first 和 .last 项目类以及 ::first-child 和 ::last-child。

标签： jquery css zurb-foundation-5

【解决方案1】：

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

这将允许 Foundation 完成它的工作并保持正确的圆角。

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。

【讨论】：