Question

我认为我这样做有点傻，所以我很乐意为新方法提出建议。

我正在为手机创建一个手风琴式下拉导航，但我希望目标div在面板组之外。我的代码格式为：

<div class='panel-group' id='accordian'>

  <div class='mystyles'>
    <ul>
     <li>
       <div class='nav-item'>
         <a data-toggle='collapse' data-parent='#accordian' href='#target-one-id'>Item 1</a>
       </div>
     </li>
      .... more list items here...
    </ul
  </div>
  <!-- the collapsed divs start here -->
  <div id='target-one-id' class='clearfix collapse panel-collapse'>
    ...content
  </div>
  ... more target divs here
</div>  <!-- end panel group -->

我选择这样做，因为我需要将链接设置为与折叠的div不同，我希望它们显示在页面下方。但是，它通常可以使目标div崩溃，你必须点击它的父链接。只要点击任何列表链接，我希望孩子崩溃。或者换句话说，我想在任何时候只能看到一个目标div。

我可能只是不了解bootstrap，但我该怎么做呢？

编辑：一个糟糕的解决方案

所以我有一个稍微粗略的解决方案，我在其中添加表格的js代码：

$("#target-one").on("show.bs.collapse", function(){
                $("#target-two").collapse('hide');
                $("#target-three").collapse('hide');
             });

这样可以工作，但过渡动画是生涩的，关闭的目标似乎会在隐藏时重新打开和关闭。什么是更好的解决方案？

$("#target-one").on("show.bs.collapse", function(){
                $("#target-two").collapse('hide');
                $("#target-three").collapse('hide');
             });
$("#target-two").on("show.bs.collapse", function(){
                $("#target-one").collapse('hide');
                $("#target-three").collapse('hide');
             });
$("#target-three").on("show.bs.collapse", function(){
                $("#target-two").collapse('hide');
                $("#target-one").collapse('hide');
             });

.mystyles ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}
.mystyles ul li {
 display:inline-block;
}
.mycontent {
  background-color:orange;
}
.one {
 height:300px;
 background-color:pink;
}
.two {
 width:200px;
 height:500px;
}

<head>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class='panel-group' id='accordian'>
    <div class='mystyles'>
      <ul>
        <li>
          <div class='nav-item'>
            <a data-toggle='collapse' data-parent='#accordian' href='#target-one'>Item 1</a>
          </div>
        </li>
        <li>
          <div class='nav-item'>
            <a data-toggle='collapse' data-parent='#accordian' href='#target-two'>Item 2</a>
          </div>
        </li>
        <li>
          <div class='nav-item'>
            <a data-toggle='collapse' data-parent='#accordian' href='#target-three'>Item 3</a>
          </div>
        </li>
      </ul </div>
      <!-- the collapsed divs start here -->
      <div id='target-one' class='clearfix collapse panel-collapse'>
        <div class='mycontent one'>
          content...
        </div>

      </div>
      <div id='target-two' class='clearfix collapse panel-collapse'>
        <div class='mycontent two'>
          content...
        </div>
      </div>
      <div id='target-three' class='clearfix collapse panel-collapse'>
        <div class='mycontent three'>
          content...
        </div>

      </div>
    </div>
    <!-- end panel group -->
</body>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

好的，所以这个片段似乎正常工作......我现在有点困惑。我的实际代码几乎完全相同，除了插入到目标div中的一些动态内容。

隐藏差异的大小调整会导致问题吗？我不知道如何在代码片段中模拟它。

Bootstrap 3面板组在组外部崩溃

0 个答案: