Question

我在bootstrap中创建了一个带有collapse.js的导航菜单。我为affix.js添加了一个div（sidemenu）。问题是当我添加词缀div时，我的面板在打开另一个时不会自动关闭。当我删除词缀div时，它会再次正常工作。

知道如何解决这个问题吗？

Answer 1

只需将data-parent更改为.sidemenu：

即可

Bootply ：http://www.bootply.com/knls9Ep2xL

HTML ：

<div class="panel-group productMenu col-md-3 col-sm-4 hidden-xs" id="accordion">
  <div class="sidemenu" data-spy="affix" data-offset-top="450">
    <div class="panel panel-default">
      <div class="pMenuheadingRed">
          <a data-toggle="collapse" data-parent=".sidemenu" href="#collapseOne">
            COOKING &amp; GRILLING 
          </a>
     </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <ul>
            <li><a>Sunflower Spread »</a></li>
            <li><a>Culinario Margarine »</a></li>
            <li><a>Gourmet »</a></li>   
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="pMenuheadingOrange">
          <a data-toggle="collapse" data-parent=".sidemenu" href="#collapseTwo">
            FRYING
          </a>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
              <li class="pMenuheadingSmall">Semi liquid</li>
                <li><a>Gold »</a></li>
                <li><a>Gold ultra »</a></li>
              <li class="pMenuheadingSmall">Oils</li>
                <li><a>Frit Frying Oil »</a></li>
                <li><a>Chef Frying Oil »</a></li>
                <li><a>Platinum Frying Oil »</a></li>
                <li><a>Green Frying Oil »</a></li>
              <li class="pMenuheadingSmall">Fats</li>
                <li><a>Deep-frying fat »</a></li>
                <li><a>Palm fat »</a></li>
                <li><a>Tallow Fat »</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

折叠面板引导程序保持打开状态

1 个答案: