需要帮助... Bootstrap Button / matchMedia / removeClass

Question

在网站中，我使用菜单。如果您使用 PC 调用该页面，菜单应该是完全可见的。如果您使用手机调用该页面，则应该只显示一个按钮，并且单击该按钮会打开菜单。

PC 版一切正常。菜单可见，按钮隐藏。

使用手机通话时，该按钮可见。然而，菜单也被折叠起来了。

代码如下：

<button class="btn btn-default btn-block hidden-md hidden-lg hidden-xl" data-toggle="collapse" data-target="#menulist">Show more ...</button>

<div id="menulist" class="collapse in">
	<div class="panel-body nav-menu-left">
		<table class="table">
			<tr><td><a href="1.php">Menu 1</a></td></tr>								
			<tr><td><a href="2.php">Menu 2</a></td></tr>
			<tr><td><a href="3.php">Menu 3</a></td></tr>

		</table>
	</div>
</div>
					
<script type="text/javascript">
$(document).ready(function () {
  if (matchMedia) {
	var mq = window.matchMedia("(max-width: 765)");
	mq.addListener(WidthChange);
	WidthChange(mq);
  }

  function WidthChange(mq) {
	if (mq.matches) {
	

	  $("#menulist").removeClass("in");
	}
  }
});
</script>

Answer 1

删除这一行

<div id="menulist" class="collapse in">

与

<div id="menulist" class="navbar-collapse collapse">