html - 在 Bootstrap 3 中显示和隐藏区域的两个不同按钮

Question

我在我的网站上使用 Bootstrap 3，我有很多地方使用按钮/链接来切换区域的可见性，使用 data-toggle="collapse" 技术和 bootstrap CSS。

但是我有一个区域需要两个按钮，一个显示按钮和一个隐藏按钮。其中一个将显示相关的 DIV，另一个将其隐藏。

我知道我也可以用 jQuery .show() 和 .hide() 来做到这一点，但是我有一个简单的 Bootstrap“语法”吗？我不见了？

Answer 1

您只需几行代码即可创建此功能。

将其复制到某处的js中，，

$("[data-hide]").click(function(){
    $($(this).attr('data-hide')).hide();
});

$("[data-show]").click(function(){
    $($(this).attr('data-show')).show();
});

现在您所要做的就是添加 data-hide='#id_of_element_to_hide' 或 data-show='.classname_of_elements_to_show' 来显示或隐藏您的内容。

这是一个 fiddle 。 https://jsfiddle.net/yrh0kusL/