javascript - 如果选择了下拉选择，则 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 的呈现方式