javascript - 堆叠 <ul> 元素和其中的 <li> - 移动设计

Question

我正在尝试制作我创建的 OrgChart 的移动版本；但是，我在尝试按照我想要的方式堆叠 ul 和 li 元素时遇到了麻烦。本质上，我需要将元素堆叠在一起，就像我在这里粗略绘制的 ms Paint 一样:

我现在拥有的是嵌套在一些 li 元素中的一系列 ul 元素。嵌套在 li 元素中的每个 ul 元素表明该元素是一个或多个 li 元素的父元素。参见CodePen:http://codepen.io/jacob_johnson/pen/xwLmWo

我现在不太关心连接器，但我很难理解如何堆叠这些元素。我对 HTML/CSS 还比较陌生……天啊，如果这可以通过一些 JavaScript 来实现，我也洗耳恭听；但是，这适用于移动设备(即当屏幕宽度非常小时)。

以下是 HTML 设置方式的示例:

<div class="tree">
  <ul>
    <li>
      <div id="ss_menu">
        <a class="ss_button"><span>Director </span></a>
        <div class="ss_content">
          <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
        </div>
      </div>
    <ul>
      <li>
        <div id="ss_menu">
          <a class="ss_button"><span>Assistant to the Director </span></a>
          <div class="ss_content">
            <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
          </div>
        </div>
        <ul>
          <li>
            <div id="ss_menu">
              <a class="ss_button"><span>Deputy Director </span></a>
              <div class="ss_content">
                <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
              </div>
            </div>
          <ul>
            <li>
              <a href="#" class="just-line"><br/><br/><br/></a>
              <ul>
                <li>
                  <div id="ss_menu">
                    <a class="ss_button"><span>Associate Director </span></a>
                    <div class="ss_content">
                      <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                    </div>
                  </div>
                  <ul>
                    <li>
                      <a href="#" class="just-line"><br/><br/><br/></a>
                      <ul>
                        <li>
                          <a href="#" class="just-line"><br/><br/><br/></a>
                          <ul>
                            <li>
                              <a href="#"><span>Consumer Laws &amp; Regulations</span></a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <div id="ss_menu">
                <a class="ss_button"><span>Senior Associate Director </span></a>
                <div class="ss_content">
                  <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                </div>
              </div>
              <ul>
                <li>
                  <a href="#" class="just-line"><br/><br/><br/></a>
                  <ul>
                    <li>
                      <a href="#" class="just-line"><br/><br/><br/></a>
                      <ul>
                        <li>
                          <div id="ss_menu">
                            <a class="ss_button"><span>Assistant Director </span></a>
                            <div class="ss_content">
                              <img src="http://img3.wikia.nocookie.net/__cb20121227201208/jamesbond/images/6/61/Generic_Placeholder_-_Profile.jpg" width="70px" style="border: 1px solid #000;"/><br/>
                            </div>
                          </div>
                          <ul>
                            <li>
                              <a href="#"><span>Examiner Training </span></a>
                            </li>
                            <li>
                              <a href="#"><span>Supervision Administration </span></a>
                            </li>
                            <li>
                              <a href="#"><span>Reserve Bank Oversight</span></a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>

Answer 1

您不应该对多个对象使用一个 ID，通常的做法是一次性使用它们并用于 jQuery/Javascript 功能。我会将 ss_menu 更改为一个类。至于移动设备上的样式，我将使用媒体查询并以此开始:

@media (max-width: 600px) {
  .tree li a, li{
    display:block;
    width:100%;
    box-sizing:border-box;    
  }
}