如何使用 Bootstrap 和 jQuery 根据多个值显示隐藏 div 元素？

在网页开发中，我们经常需要根据用户的输入或选项，动态地显示或隐藏一些元素。这时候可以使用 Bootstrap 和 jQuery。Bootstrap 可以方便地实现页面布局；jQuery 则可以方便地操作 DOM 元素，实现动态效果。

步骤

我们假设有一个表单，其中有两个下拉菜单，分别是“类别”和“级别”。我们需要根据用户的选择，显示或隐藏相应的 div 元素。

1. 首先，在 HTML 中添加菜单和相应的 div 元素。使用 Bootstrap 的 form-group 样式，让表单更美观。

<div class="form-group">
  <label for="category">类别</label>
  <select id="category" class="form-control">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <!-- 其他选项 -->
  </select>
</div>
<div class="form-group">
  <label for="level">级别</label>
  <select id="level" class="form-control">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <!-- 其他选项 -->
  </select>
</div>
<div id="content1" class="hidden">
  <!-- 显示或隐藏的内容1 -->
</div>
<div id="content2" class="hidden">
  <!-- 显示或隐藏的内容2 -->
</div>
<!-- 其他 div 元素 -->

其中，form-control 样式会将下拉菜单渲染成 Bootstrap 风格；hidden 样式可以隐藏元素。

2. 使用 jQuery 监听菜单的选择事件，根据选择的值显示或隐藏相应的 div 元素。

<script>
  // 监听菜单的选择事件
  $('#category, #level').on('change', function() {
    // 获取选择的值
    var category = $('#category').val();
    var level = $('#level').val();

    // 根据选择的值显示或隐藏相应的 div 元素
    if (category === '1' && level === '2') {
      $('#content1').removeClass('hidden');
      $('#content2').addClass('hidden');
    } else if (category === '2' && level === '1') {
      $('#content1').addClass('hidden');
      $('#content2').removeClass('hidden');
    } else {
      $('#content1, #content2').addClass('hidden');
    }
  });
</script>

其中，#category, #level 是 jQuery 的选择器语法，表示同时监听 id 分别为 category 和 level 的元素；val() 方法可以获取菜单选择的值；addClass() 和 removeClass() 方法可以添加或移除元素的样式。这里使用了三个 if/else 语句，根据选择的值设置不同的显示或隐藏方式。如果都没有匹配的条件，则将所有的 div 元素隐藏。

总结

使用 Bootstrap 和 jQuery 根据多个值显示和隐藏 div 元素，需要通过 HTML 添加菜单和 div 元素，使用 Bootstrap 的样式渲染菜单和美化表单，利用 jQuery 监听菜单的选择事件，根据选择的值动态显示或隐藏相应的 div 元素。