隐藏按钮在圆形按钮组与基础

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

任何想法我可以隐藏按钮1，然后有按钮2(自动?)有漂亮的圆角左上角?

Answer 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;

这是一个工作演示。

另

如果你想使用基于类的方法，你可以这样做:

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;
}