获取 Bootstrap 3 个选项卡窗格以使用 TreeView

Question

我正在尝试从此处的 BootSnipp 获取 TreeView：1 以使用 Bootstrap 3 个选项卡。

它最初按预期工作，但在点击几下后出现故障，然后 responding/not 任意响应。这是我正在使用的 html+js+css：

// ***************** BEGIN TREE JS ***************** 
$.fn.extend({
  treed: function() {
    return this.each(function() {
      //initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function() {
        var branch = $(this); //li with children ul
        branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
        branch.addClass('branch');
        branch.on('click', function(e) {
          if (this == e.target) {
            var icon = $(this).children('i:first');
            icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            $(this).children().children().toggle();
          }
        })
        branch.children().children().toggle();
      });
      //fire event from the dynamically added icon
      $('.branch .indicator').on('click', function() {
        $(this).closest('li').click();
      });
      //fire event to open branch if the li contains an anchor instead of text
      $('.branch a').on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
      //fire event to open branch if the li contains a button instead of text
      $('.branch button').on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
    });
  }
});


$('.tree').treed();
//*****************  END TREE JS *****************

/*BEGIN TREE CSS*/

.tree,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.tree ul {
  margin-left: 1em;
  position: relative
}
.tree ul ul {
  margin-left: .5em
}
.tree ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid
}
.tree li {
  margin: 0;
  padding: 0 1em;
  line-height: 2em;
  color: #369;
  font-weight: 700;
  position: relative
}
.tree ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0
}
.tree ul li:last-child:before {
  background: #fff;
  height: auto;
  top: 1em;
  bottom: 0
}
.indicator {
  margin-right: 5px;
}
.tree li a {
  text-decoration: none;
  color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
  text-decoration: none;
  color: #369;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-7">
      <ul id="tabs" class="tree">
        <li><a href="#panel-continent-overview" data-target="#panel-continent-overview" role="tab" data-toggle="tab">Continent Overview</a>
        </li>

        <li><a href="#">Countries</a>
          <ul>

            <li><a href="#">Country 1</a>
              <ul>
                <li><a href="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" data-target="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" role="tab" data-toggle="tab">Country Overview</a>
                </li>




              </ul>
            </li>

            <li><a href="#">Country 2</a>
              <ul>
                <li><a href="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1" data-target="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1" role="tab" data-toggle="tab">Country Overview</a>
                </li>


                <li><a href="#">Cities</a>
                  <ul>

                    <li><a href="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" data-target="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" role="tab" data-toggle="tab">City P</a>
                    </li>


                  </ul>
                </li>



              </ul>
            </li>

          </ul>
        </li>

        <li><a href="#">Cities</a>
          <ul>

            <li>
              <a href="#">City A</a>
              <ul>
                <li><a href="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" data-target="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" role="tab" data-toggle="tab">Overview</a>

                </li>
              </ul>
            </li>

            <li>
              <a href="#">City B</a>
              <ul>
                <li><a href="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" data-target="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" role="tab" data-toggle="tab">Overview</a>

                  <li><a href="#">Neighborhoods</a>
                    <ul>

                      <li><a href="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" data-target="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" role="tab" data-toggle="tab">Neighborhood X</a>
                      </li>

                    </ul>
                  </li>

                </li>
              </ul>
            </li>

          </ul>
        </li>

        <li><a href="#">Neighborhoods</a>
          <ul>

            <li><a href="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" data-target="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" role="tab" data-toggle="tab">Neighborhood T</a>
            </li>

          </ul>
        </li>
      </ul>
    </div>

    <div class="col-xs-5">
      <div class="tabbable" id="tabbable-proj">

        <div class="tab-content main-tab-content">
          <div class="tab-pane fade in active" id="panel-continent-overview">
            <strong>Continent Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
            <strong>Country Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
            <strong>Country Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
            <strong>City Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
            <strong>Neighborhood Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
            <strong>City Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
            <strong>City Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
            <strong>Neighborhood Details</strong>
          </div>

          <div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
            <strong>Neighborhood Details</strong>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

我完全不知道是什么导致了这个问题。有人可以帮我解决这个问题吗？

Answer 1

好的，我自己试试。

它不起作用，因为 Bootstrap 期望选项卡是一个扁平的 ul - 而我有多个嵌套的 ul。

我通过

完成了它的工作

将树与 tabbable 分离；
为选项卡创建一个隐藏的平面 ul；和
挂钩相关的树锚点击以在相应的选项卡上手动调用 $('...).tab('show')。

我还发现使用此策略，我可以从页面上的任何位置调出我的选项卡 - 例如来自面包屑或随机锚点。

现在我知道我的问题对大多数人来说太菜鸟了，无法解决 - html 本身到处都是。

我得出的答案看起来有点老套。至少有人会评论它的好坏吗？比如，它会因隐藏 ul 而招致搜索引擎处罚吗？对可访问性的影响是什么——特别是当我从锚标签中删除文本时？

或者我应该post一个或多个新问题来征求这种反馈？

干杯

// ***************** BEGIN TREE JS ***************** 
$.fn.extend({
  treed: function() {
    return this.each(function() {
      //initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function() {
        var branch = $(this); //li with children ul
        branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>");
        branch.addClass('branch');
        branch.on('click', function(e) {
          if (this == e.target) {
            var icon = $(this).children('i:first');
            icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
            $(this).children().children().toggle();
          }
        })
        branch.children().children().toggle();
      });
      //fire event from the dynamically added icon
      $('.branch .indicator').on('click', function() {
        $(this).closest('li').click();
      });
      //fire event to open branch if the li contains an anchor instead of text
      $('.branch a').on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
      //fire event to open branch if the li contains a button instead of text
      $('.branch button').on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
    });
  }
});


$('.tree').treed();
//*****************  END TREE JS *****************
$(document).ready(function() {
  $("a.tree-link").on('click', function (event) {
    var hrefTab = $(this).attr('href');
    $('#hidden-tabs a[href='+hrefTab+']').tab('show');
  });
});

#hidden-tabs{
  height: 0px;
  list-style-type: none;
  padding:0; 
  margin:0;
}

#hidden-tabs{
  height: 0px;
  list-style-type: none;
  padding:0; 
  margin:0;
}
#hidden-tabs li{
  height: 0px;
  padding:0; 
  margin:0;
}

#hidden-tabs li a{
  height: 0px;
  padding:0; 
  margin:0;
}


/*BEGIN TREE CSS*/

.tree,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.tree ul {
  margin-left: 1em;
  position: relative
}
.tree ul ul {
  margin-left: .5em
}
.tree ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 1px solid
}
.tree li {
  margin: 0;
  padding: 0 1em;
  line-height: 2em;
  color: #369;
  font-weight: 700;
  position: relative
}
.tree ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 0;
  border-top: 1px solid;
  margin-top: -1px;
  position: absolute;
  top: 1em;
  left: 0
}
.tree ul li:last-child:before {
  background: #fff;
  height: auto;
  top: 1em;
  bottom: 0
}
.indicator {
  margin-right: 5px;
}
.tree li a {
  text-decoration: none;
  color: #369;
}
.tree li button,
.tree li button:active,
.tree li button:focus {
  text-decoration: none;
  color: #369;
  border: none;
  background: transparent;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
      <div class="row">
        <div class="col-xs-7">
          <ul class="tree">
            <li><a href="#panel-continent-overview"  class="tree-link">Continent Overview</a>
            </li>

            <li><a href="#">Countries</a>
              <ul>

                <li><a href="#">Country 1</a>
                  <ul>
                    <li><a href="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0"  class="tree-link">Country Overview</a>
                    </li>




                  </ul>
                </li>

                <li><a href="#">Country 2</a>
                  <ul>
                    <li><a href="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1"  class="tree-link">Country Overview</a>
                    </li>


                    <li><a href="#">Cities</a>
                      <ul>

                        <li><a href="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a"  class="tree-link">City P</a>
                        </li>


                      </ul>
                    </li>



                  </ul>
                </li>

              </ul>
            </li>

            <li><a href="#">Cities</a>
              <ul>

                <li>
                  <a href="#">City A</a>
                  <ul>
                    <li><a href="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18"  class="tree-link">Overview</a>

                    </li>
                  </ul>
                </li>

                <li>
                  <a href="#">City B</a>
                  <ul>
                    <li><a href="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd"  class="tree-link">Overview</a>

                      <li><a href="#">Neighborhoods</a>
                        <ul>

                          <li><a href="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71"  class="tree-link">Neighborhood X</a>
                          </li>

                        </ul>
                      </li>

                    </li>
                  </ul>
                </li>

              </ul>
            </li>

            <li><a href="#">Neighborhoods</a>
              <ul>

                <li><a href="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19"  class="tree-link">Neighborhood T</a>
                </li>

              </ul>
            </li>
          </ul>
        </div>

        <div class="col-xs-5">
          <div class="tabbable" id="tabbable-proj">

            <ul id="hidden-tabs"  role="tablist" aria-expanded="false">
              <li>
                <a href="#panel-continent-overview" aria-controls="panel-continent-overview" role="tab" data-toggle="tab"></a>
              </li>
              
              <li>
                <a href="#panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" aria-controls="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0" role="tab" data-toggle="tab"></a>
              </li>

              <li>
                <a href="#panel-country-45f97844-9773-4059-bafd-a2782fc06db1" aria-controls="panel-country-45f97844-9773-4059-bafd-a2782fc06db1" role="tab" data-toggle="tab"></a>
              </li>

              <li>
                <a href="#panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" aria-controls="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a" role="tab" data-toggle="tab"></a>
              </li>

              <li>
                <a href="#panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" aria-controls="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18" role="tab" data-toggle="tab"></a>
              </li>

              <li>
                <a href="#panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" aria-controls="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd" role="tab" data-toggle="tab"></a>
              </li>

              <li>
                <a href="#panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" aria-controls="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71" role="tab" data-toggle="tab"></a>
              </li>


              <li>
                <a href="#panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" aria-controls="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19" role="tab" data-toggle="tab"></a>
              </li>
            </ul>

            <div class="tab-content main-tab-content">
              <div class="tab-pane fade in active" id="panel-continent-overview">
                <strong>Continent Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-country-9400470e-fa49-46ea-b587-2ceb108600c0">
                <strong>Country 1 Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-country-45f97844-9773-4059-bafd-a2782fc06db1">
                <strong>Country 2 Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-city-2120d7aa-2b93-4d0d-a42b-8c6fedc9333a">
                <strong>City P Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-neighborhood-babea547-cfb6-4e12-8c4a-bbbb25068d8a">
                <strong>Neighborhood Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-city-b4a991ce-80ef-4406-b1d2-9892c0d93d18">
                <strong>City A Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-city-2e6f1227-66d0-4061-9243-bf6cf4feaabd">
                <strong>City B Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-neighborhood-f3fd5e2f-583d-4ccb-b163-03e118896f71">
                <strong>Neighborhood X Details</strong>
              </div>

              <div class="tab-pane fade" id="panel-neighborhood-319d56ac-286f-4afa-af42-5ec74bbcac19">
                <strong>Neighborhood T Details</strong>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

获取 Bootstrap 3 个选项卡窗格以使用 TreeView

Getting Bootstrap 3 Tab Panes to Work with TreeView

treeview

tabs

twitter-bootstrap-3