Question

我第一次在这里发帖，希望我能正确地做到这一点！

以下是示例代码：

＆＃13;

    $(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')
      });
    });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我的问题：我的侧边栏功能有问题。我需要侧边栏＆＃34;菜单＆＃34;在页面加载时打开（不是它下面的子部分，只是菜单＆＃39; s）。我通过将类collapse.in添加到我的菜单组来完成此操作。但是，现在点击＆＃34; Home＆＃34;链接它再次打开菜单列表，需要再次单击才能关闭侧边栏菜单。这也会弄乱glyphicon动画并以错误的方式面对箭头。

有关如何解决此问题的任何想法？我希望菜单列表在加载时打开，但只需单击主页链接即可关闭整个侧边栏。我也喜欢使用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这样的代码，它会更容易，更快:)“

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

1 个答案: