Layui 隱藏div詳解

一、Layui隱藏按鈕

Layui隱藏按鈕非常簡單，只需要加入以下代碼即可：

<button class="layui-btn" lay-submit lay-filter="hiddenBtn" id="hiddenBtn">隱藏</button>

這裡的「lay-submit」和「lay-filter」是Layui的基本屬性，用於處理表單提交和篩選等操作。id屬性則是用來標識這個按鈕的，開發者可以根據自己的需求進行自定義。

接下來需要在JavaScript中加入控制隱藏的代碼：

$('button#hiddenBtn').on('click', function() {
  $('div#hiddenDiv').hide();
});

這裡為jQuery語法，首先獲取id為hiddenBtn的button元素，然後添加點擊事件。當按鈕被點擊時，id為hiddenDiv的div元素將會被隱藏。

二、Layui隱藏跟顯示

Layui隱藏跟顯示同樣非常簡單，可以使用Layui的內置函數進行實現。

在HTML中：

<button class="layui-btn" id="toggleBtn1">隱藏/顯示1</button>
<div id="toggleDiv1"><p>這是要被隱藏和顯示的內容1</p></div>
<button class="layui-btn" id="toggleBtn2">隱藏/顯示2</button>
<div id="toggleDiv2"><p>這是要被隱藏和顯示的內容2</p></div>

在JavaScript中：

layui.use('jquery', function(){
  var $ = layui.jquery;
  $('#toggleBtn1').click(function(){
    $('#toggleDiv1').toggle();
  });
  $('#toggleBtn2').click(function(){
    $('#toggleDiv2').toggle();
  });
});

以上代碼中，使用了toggle()函數，實現了隱藏和顯示的功能。可以根據自己的需求進行自定義。

三、Layui隱藏table

在Layui中隱藏table需要使用CSS的display屬性進行控制。

$(document).ready(function(){
  $('#tableBtn').click(function(){
    $('#tableDemo').toggleClass('layui-hide');
  });
});

這裡的tableDemo是需要被隱藏的table元素的id，可以根據實際情況進行自定義。toggleClass()函數則是在CSS類layui-hide和tableDemo之間進行切換，實現了表格的隱藏和顯示。

四、Layui隱藏第二行th

和Layui隱藏table一樣，隱藏第二行th也需要運用CSS的display屬性。

$(document).ready(function(){
  $('#hideTh').click(function(){
    $('thead tr:nth-child(2) th').toggle();
  });
});

這裡的nth-child(2)表示要隱藏的th所在的行數為2，toggle()函數實現了隱藏和顯示的功能。

五、Layui table 隱藏列選取

Layui table 隱藏列選取需要使用到hideCols()函數。

$(document).ready(function(){
  var table = layui.table;
  table.render({
    ……
    cols: [[
      {type:'checkbox'}
      ……
    ]],
    ……
  });
  $('#hideCols').click(function(){
    var checkStatus = table.checkStatus('demo')
    ,data = checkStatus.data; //獲取選中的數據
    table.hideCols('demo', data[0].field);
  });
});

這裡的hideCols(‘demo’, data[0].field)表示隱藏名稱為field的一列。選中的數據可以根據自己的需求進行自定義。

六、LayUI隱藏列

在Layui中也可以使用CSS的display屬性進行隱藏列，但是需要加上一點JS的處理。

$(document).ready(function(){
  $('#hideColumn').click(function(){
    var n = $('#columnNum').val();
    $('table tr td:nth-child('+n+'),table tr th:nth-child('+n+')').toggle();
  });
});

這裡的columnNum是需要隱藏的列所在的列數，toggle()函數實現了隱藏和顯示的功能。

七、Layui表格隱藏

在Layui中使用CSS的display屬性隱藏表格需要在JavaScript中進行處理。

$(document).ready(function(){
  $('#hideTable').click(function(){
    $('#tableDemo').css('display', 'none');
  });
});

這裡使用了jQuery的css()函數，將CSS的display屬性設置為none，實現了表格的隱藏。

八、Layui列表隱藏字段

在Layui中隱藏列表字段需要使用CSS的display屬性和JS進行處理。

$(document).ready(function(){
  $('#hideList').click(function(){
    var n = $('#listNum').val();
    $('li:nth-child('+n+')').css('display','none');
  });
});

這裡的listNum是需要被隱藏的列的列數，代碼實現了這一列的隱藏。

以上就是Layui隱藏div的詳解，開發者可以根據自己的需求選擇每個方法中的代碼，進行Layui開發。