我正在使用 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 吗?
最佳答案
使用 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 .
关于jquery - 使用 Foundation 隐藏圆形按钮组中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32560458/