如何显示在父级下排列的div用于树链接显示

Question

进展：https://jsfiddle.net/zigzag/wkf0ufat/6/

我如何确保各自的球队three teams in each vertical column排在NBA，NFL和NHL的父级之下。我在这里打电话给css体操，我们需要考虑第一排和第二排的水平布局，而第三排的垂直布局。第三行是一个团队列表。我从Grid布局开始，但意识到使用IE 11我无法尝试。

$('.menu-toggle').click(function() {
  $(this).find('span').toggleClass('glyphicon-triangle-bottom').toggleClass('glyphicon-triangle-right');
  var clickValue = $(this).attr('id');
  //do switch statement based on clickValue. Right now it selects the id of first just fine.
  //first: toggle second and hide third
  //second: show
  $('#secondRow').toggle();
});

.container-fluid {
  margin: 5px;
}

.box {
  height: 200px;
  width: 200px;
  border: 2px solid black;
  margin: auto;
  background: dodgerblue;
  color: white;
  padding: 20px;
}

#firstRow,
#secondRow {
  text-align: center;
}

#secondRow>div {
  display: inline-block;
}

span {
  color: white;
  padding-top: 60px;
}

span:hover {
  opacity: 0.2;
}

.thirdRow {
  text-align: left;
}

.thirdRow div {
  dispaly: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row" id="firstRow">
    <div class="center-block box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Leagues</p>
      <a class="menu-toggle" href="#" id="first">
        <span class="glyphicon glyphicon-triangle-bottom"></span>
      </a>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row" id="secondRow">
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>NBA</p>
      <span class="glyphicon glyphicon-triangle-bottom"></span>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>NFL</p>
      <span class="glyphicon glyphicon-triangle-bottom"></span>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>NHL</p>
      <span class="glyphicon glyphicon-triangle-bottom"></span>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row thirdRow" id="NBArow">
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Warriors</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Rockets</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Celtics</p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row thirdRow" id="NFLrow">
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Penguins</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Kings</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Ducks</p>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row thirdRow" id="NHLrow">
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Penguins</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Kings</p>
    </div>
    <div class="box">
      <img class="img-circle" src="http://via.placeholder.com/50x50?text=IMAGE" />
      <p>Ducks</p>
    </div>
  </div>
</div>

Answer 1

您的问题提到了树视图，它实际上是嵌套列表的集合。您描述的块视图需要水平嵌套列表布局的某些级别和垂直的某些级别，但内容实际上只是列表列表（或列表列表...）

这是一个使用列表进行标记的片段。一个具有默认样式，另一个具有一些样式以实现所需的列。此方法将准确显示比示例更多或更少的列表。

$('a').on('click', function(e) {
  e.preventDefault();
  $(this).next('ul').slideToggle()
});

.blocks {
  font-size: 0;
}

.blocks a,
.blocks span {
  display: block;
  background: #ddd;
  width: 100px;
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  margin: 0 auto;
}

.blocks ul {
  list-style: none;
  padding: 0;
}

.blocks li {
  display: inline-block;
  vertical-align: top;
}

.blocks ul ul ul li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Tree</h3>
<div class="tree">
  <ul>
    <li>
      <a href="#">Leagues</a>
      <ul>
        <li>
          <a href="#">NFL</a>
          <ul>
            <li><span>Bears</span></li>
            <li><span>Lions</span></li>
            <li><span>Browns</span></li>
          </ul>
        </li>
        <li>
          <a href="#">NBA</a>
          <ul>
            <li><span>Clippers</span></li>
            <li><span>Hornets</span></li>
            <li><span>Nets</span></li>
          </ul>
        </li>
        <li>
          <a href="#">NHL</a>
          <ul>
            <li><span>Sabres</span></li>
            <li><span>Blackhawks</span></li>
            <li><span>Bruins</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<h3>Blocks</h3>
<div class="blocks">
  <ul>
    <li>
      <a href="#">Leagues</a>
      <ul>
        <li>
          <a href="#">NFL</a>
          <ul>
            <li><span>Bears</span></li>
            <li><span>Lions</span></li>
            <li><span>Browns</span></li>
          </ul>
        </li>
        <li>
          <a href="#">NBA</a>
          <ul>
            <li><span>Clippers</span></li>
            <li><span>Hornets</span></li>
            <li><span>Nets</span></li>
          </ul>
        </li>
        <li>
          <a href="#">NHL</a>
          <ul>
            <li><span>Sabres</span></li>
            <li><span>Blackhawks</span></li>
            <li><span>Bruins</span></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>