如果选择了下拉选择，则 JQUERY 标记/样式化

Question

我一直在使用 JQUERY DATATABLES，终于能够添加此处的“隐藏列”功能：https://datatables.net/examples/api/show_hide.html

但是，我没有使用超链接，而是使用下拉按钮，如下所示：

 <div class = "btn-group">      
   <button type = "button" class = "btn btn-default btn-xs dropdown-toggle" data-toggle = "dropdown">
   Hide Column
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li><a class="toggle-vis" data-column="1">Booking</a></li>
     <li><a class="toggle-vis" data-column="2">Quote</a></li>
     <li><a class="toggle-vis" data-column="3">Line</a></li>
     ...// and so on
   </ul>
 </div>

这是将数据列链接到数据表并隐藏列的 JQUERY：

 var table = $('#dataTable').DataTable();

 $('a.toggle-vis').on('click', function(e) {
   e.preventDefault();
   var column = table.column($(this).attr('data-column'));
   column.visible(! column.visible());

   ** EDIT **
   $(this).toggleClass("dropSelected");
 });

我想要做的是，当一个或多个下拉选择（并且该列已被隐藏）时，用复选标记选定的下拉列表或更改选择的颜色。这样，用户将立即知道哪一列被隐藏了。

当然，另一方面，如果用户单击链接以使列再次可见，则检查或颜色需要消失，因为该列将再次可见。

 ** EDIT **

在页面顶部添加 CSS：

a.toggle-vis.dropSelected {color: red;} 

Answer 1

鉴于您的所有列都以可见状态开始，并且单击 a.toggle-vis 会更改它们的可见性，您可以简单地切换元素的类：

$('a.toggle-vis').on('click', function(e) {
   e.preventDefault();
   var column = table.column($(this).attr('data-column'));
   column.visible(! column.visible());

   this.toggleClass("hidden");
 });

并使用 CSS 来满足 a.toggle-vis.hidden 的呈现方式