Question

我一直在尝试在datatable中定位Table Tools工具栏的功能。好吧，我放弃了这个想法只是因为我感觉不可能。

现在我有一个包含在其他div中的类的Div。我想在我的按钮上显示特定的div。点击。

我的Html代码：

<div class="table-responsive">
  <div id="myDataTable_wrapper" class="dataTables_wrapper" role="grid">
     <div class="DTTT_container ui-buttonset ui-buttonset-multi">
     //i have my datatable html here 
     </div>
  </div>
</div>

我想在点击时隐藏并显示带有DTTT_container的Div类。

我试过这样的：在我的初始页面渲染中，我使用

将DTTT_container隐藏起来

<style>
DTTT_container
{
visibility:hidden;
}
</style>

在我的按钮下单击我必须隐藏/显示。

$('#btnclick').click(function()
{
//I am unable to get correct logic to hide/show i.e toggling .
});

此致

Answer 1

您不能将.toggle（）与使用css属性visibility

设置的元素一起使用

尝试，

$('#btnclick').click(function() {

 var elem = $('.DTTT_container');
 var visibility = elem.css('visibility');

 if(visibility === "hidden") {
   elem.css('visibility','visible');
 }
 else {
     elem.css('visibility','hidden');
 }

});

DEMO

或者你可以使用.toggleClass（），如下所示做一些技巧，

CSS：

.visible {
    visibility :visible;
}
.hidden {
    visibility :hidden;
}

JS：

$('#btnclick').click(function () {
    $('.DTTT_container').toggleClass('visible hidden');
});

DEMO I

Answer 2

将您的CSS更改为：

.DTTT_container
{
    display: none;
}

然后您可以使用 .toggle() ：

$('#btnclick').click(function() {
    $('.DTTT_container').toggle()
});

Answer 3

使用css .DTTT_container在开头隐藏display:none;以使用.toggle()。

试试这个：

$('#btnclick').click(function()
{
  $('div.DTTT_container ').toggle();
});

Answer 4

你的css代码没有隐藏任何元素..你正在使用可见属性

$('#btnclick').click(function()
{


$(".DTTT_container").css("visibility","visible");
});

Answer 5

我认为你在寻找

$('.DTTT_container').toggle();

请参阅此处了解更多信息：http://api.jquery.com/toggle/

用课隐藏/显示DIv？典型的嵌套Div

5 个答案:

DEMO

DEMO I