如何在Bootstrap中通过data-toggle触发函数并实现列表项交互？

嘿，我来帮你搞定这个交互需求！先梳理下你要的核心逻辑：点击列表项 → 隐藏当前项 → 显示目标div → 触发指定函数并获取列表项的data值。下面是完整的实现方案：

1. 先修正你现有代码的小问题 #

你写的$(this).data(code)这里漏了引号，应该写成$(this).data('code')，不然JavaScript会把code当成一个未定义的变量，而不是我们要获取的data-code属性名哦。

2. 完整代码示例 #

HTML结构 #

<html lang="en">
<head>
  <title>My Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入jQuery，如果你还没引入的话 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 默认隐藏目标容器 */
    #targetContainer {
      display: none;
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <!-- 项目列表 -->
  <ul class="item-list">
    <li data-code="item1">项目1</li>
    <li data-code="item2">项目2</li>
    <li data-code="item3">项目3</li>
  </ul>

  <!-- 要显示的目标div容器 -->
  <div id="targetContainer">这是点击列表项后显示的容器</div>

  <script>
    // 你的指定函数
    function appToggle() {
      var codeVal = $(this).data('code');
      console.log('当前点击项的code值：', codeVal);
      // 这里可以添加更多你需要执行的逻辑
    }

    // 绑定列表项的点击事件
    $(document).ready(function() {
      $('.item-list li').on('click', function() {
        // 1. 隐藏当前点击的列表项
        $(this).hide();
        // 2. 显示目标div容器
        $('#targetContainer').show();
        // 3. 触发指定函数，用call保证this指向当前点击的列表项
        appToggle.call(this);
      });
    });
  </script>
</body>
</html>

3. 关键逻辑说明 #

• 绑定点击事件：用$(document).ready()确保DOM加载完成后再绑定事件，避免找不到元素的问题。
• 隐藏当前项：$(this).hide()直接隐藏被点击的<li>元素。
• 显示目标容器：$('#targetContainer').show()把默认隐藏的div显示出来。
• 触发指定函数：用appToggle.call(this)让函数内部的this依然指向当前点击的列表项，这样就能正确获取到data-code的值。

4. 进阶扩展（如果需要多个对应容器） #

如果你的需求是不同列表项对应显示不同的div，可以这样调整：

<!-- 多个目标容器，id和data-code对应 -->
<div id="container-item1" class="target-container" style="display:none;">项目1对应的容器</div>
<div id="container-item2" class="target-container" style="display:none;">项目2对应的容器</div>
<div id="container-item3" class="target-container" style="display:none;">项目3对应的容器</div>

然后修改JavaScript的点击事件：

$('.item-list li').on('click', function() {
  var codeVal = $(this).data('code');
  $(this).hide();
  // 隐藏所有目标容器，再显示对应容器
  $('.target-container').hide();
  $('#container-' + codeVal).show();
  appToggle.call(this);
});

这样就能实现点击不同列表项显示对应容器的效果啦～

内容的提问来源于stack exchange，提问作者espresso_coffee