Javascript 使用jquery切换列表

我正在尝试使用html和jquery创建一个切换列表，单击按钮我想要一个下拉列表 我的html代码片段是

<div class="container">
  <div class="card text-center" style="width: 14 rem;">
    <div class="card-body">
      <button class="btn btn-danger btn-sm">
          hello
        </button>
      <div class="show">
        <ul class="list">
          <li class="e">Home</li>
          <li class="e">About</li>
          <li class="e">Contact Us</li>
          <li class="e">Log Out</li>
        </ul>
      </div>
    </div>
  </div>
</div>    

我对jquery部分有点困惑，它看起来像这样

$(document).ready(function(){
    $('.card-body').on('click','button',function(){
        $('.list li').toggleClass('list');
    });
});

---

任何帮助都将不胜感激。

如果您想使用

。请列出
，您可以这样做：

$(document).ready(function() {
  $('.card-body').on('click', 'button', function() {
    $('.list').toggleClass('info');
  });
});

注意，您也可以像
$（'.list'）.toggle（）一样执行此操作。


$（文档）.ready（函数（）{
$（'.card body'）。在（'click'，'button'，function（）上{
$（'.list'）.toggleClass（'info'）；
});
});
.list{
显示：无；
}
e{
列表样式：无；
}
.info{
显示：块；
}

你好

主页
关于
联系我们
注销

如果你想调整你的
.list
你可以这样做：

$(document).ready(function() {
  $('.card-body').on('click', 'button', function() {
    $('.list').toggleClass('info');
  });
});

注意，您也可以像
$（'.list'）.toggle（）一样执行此操作。


$（文档）.ready（函数（）{
$（'.card body'）。在（'click'，'button'，function（）上{
$（'.list'）.toggleClass（'info'）；
});
});
.list{
显示：无；
}
e{
列表样式：无；
}
.info{
显示：块；
}

你好

主页
关于
联系我们
注销