javascript - Bootstrap collapse.in 需要点击两次才能隐藏侧边栏

Question

我第一次在这里发帖，希望我做对了!

示例代码:

    $(document).ready(function() {
      $('[data-toggle=offcanvas]').click(function() {
        $('.row-offcanvas').toggleClass('active');
      });
      $('#stacked-menu li a ').click(function() {
        $(this).next('ul').slideToggle('500');
        $(this).find('i').toggleClass('glyphicon-arrow-left glyphicon-arrow-down')
      });
    });

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color: #F5F5F5;
  float: left;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
i {
  color: black;
}
.glyphicon-arrow-down {
  float: right;
  font-size: 8px;
}
.glyphicon-arrow-left {
  float: right;
  font-size: 8px;
}
.nav-container {
  background-color: #F5F5F5;
  font-weight: bold;
  margin: 0 0 0 0;
}
.nav-sub-container {
  background-color: #F5F5F5;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}
ul.nav-stacked ul.nav-stacked > li > a {
  padding-left: 25px;
}
.padRight {
  padding-right: 40px;
}
ol {
  margin-left: -40px;
}
a {
  color: black !important;
}
a:hover {
  color: #720000 !important;
}
.size {
  font-size: 12px !important;
  margin-left: 10px;
}

<link 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
        rel="stylesheet" />
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js">
</script>
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">  
</script>

<ul class="nav nav-pills nav-stacked" id="stacked-menu">
    <li>
        <a class="nav-container"
            data-target="#h1"
                data-toggle="collapse"
                    data-parent="#stacked-menu">
                        Home
                        <i class="glyphicon glyphicon-arrow-down"></i>
        </a>
    </li>
    <ul class="nav nav-pills nav-stacked collapse.in" data-toggle="false" id="h1">
        <li data-toggle="collapse" data-parent="#hs1" href="#hs1">
            <a class="nav-sub-container">
                Menu 1
                <i class="glyphicon glyphicon-arrow-left padRight"></i>
            </a>
        </li>
        <ul class="nav nav-pills nav-stacked collapse size" id="hs1">
            <li><a href="#ss1.1">Sub-section 1</a></li>
            <li><a href="#ss1.2">Sub-section 2</a></li>
        </ul>
        <li data-toggle="collapse" data-parent="#hs1" href="#hs2">
            <a class="nav-sub-container">
                Menu 2
                <i class="glyphicon glyphicon-arrow-left padRight"></i>
            </a>
        </li>
        <ul class="nav nav-pills nav-stacked collapse size" id="hs2">
            <li><a href="#ss2.1">Sub-section 1</a></li>
            <li><a href="#ss2.2">Sub-section 2</a></li>
        </ul>
        <li data-toggle="collapse" data-parent="#hs2" href="#hs3">
            <a class="nav-sub-container">
                Menu 3
                <i class="glyphicon glyphicon-arrow-left padRight"></i>
            </a>
        </li>
        <ul class="nav nav-pills nav-stacked collapse size" id="hs3">
            <li><a href="#ss3.1">Sub-section 1</a></li>
            <li><a href="#ss3.2">Sub-section 2</a></li>
            <li><a href="#ss3.3">Sub-section 3</a></li>
        </ul>
    </ul>
</ul>

我的问题:我的边栏功能有问题。我需要侧边栏“菜单”在页面加载时打开(不是它下面的子部分，只是菜单)。我通过将类 collapse.in 添加到我的菜单组来完成此操作。但是，现在单击“主页”链接时，它会再次打开菜单列表，需要第二次单击才能关闭侧边栏菜单。这也弄乱了字形动画并以错误的方式面向箭头。

关于如何解决这个问题的任何想法？我希望菜单列表在加载时打开，但只需单击主页链接即可关闭整个侧边栏。我还希望 glyphicon 箭头朝向正确的方向(尽管如果我能在第一次点击时让侧边栏关闭，这可能会自行修复)。

抱歉，我希望你已经足够清楚了。我才学习 HTML/CSS/JS 几周，所以我可能没有使用正确的术语。

Answer 1

你必须用空格分隔你的类(collapse 和 in 是两个不同的类):

改变这个:

<ul class="nav nav-pills nav-stacked collapse.in" data-toggle="false" id="h1">

对此:

<ul class="nav nav-pills nav-stacked collapse in" data-toggle="false" id="h1">

下次用 JSFiddle 或 Codepen 之类的东西提供代码，会更容易和更快:)