css - 在 CSS 菜单中扩展 UL

Question

我在使用这个简单的 CSS 菜单时遇到了问题。

我正在获取一个 JSON 对象并将其转换为一个列表。

Here is the jsFiddle for all of it

代码如下:

function buildTable(table) {
  this.iterateChildren = function(p_ul, table) {
    var li;
    for (var key in table) {
      li = document.createElement('li');
      li.className = "li-li";
      p_ul.appendChild(li);
      li.collapser = document.createElement('div');
      li.collapser.className = 'collapser li-group';
      li.collapser.addEventListener('click', CollapserClick, true);
      li.appendChild(li.collapser);
      li.name_area = document.createElement('div');
      li.name_area.className = 'name-area li-group';
      li.name_area.innerHTML = key;
      li.appendChild(li.name_area);
      if (typeof table[key] === 'object') {
        li.ul = document.createElement('ul');
        li.ul.className = 'inner-ul collapsed';
        li.appendChild(li.ul);
        li.collapser.innerHTML = '+)';
        li.collapser.ul_ref = li.ul;
        this.iterateChildren(li.ul, table[key]);
      } else {
        li.value_area = document.createElement('div');
        li.value_area.className = 'value-area li-group';
        li.name_area.innerHTML += ": ";
        if (table[key].toString().length) {
          li.value_area.innerHTML = table[key];
        } else {
          li.name_area.className += " unav";
          li.value_area.className += " unav";
          li.value_area.innerHTML = "N/A";
        }
        li.appendChild(li.value_area);
      }
    }
  }.bind(this);

  var inr_ul = document.getElementById('innerUL');
  this.iterateChildren(inr_ul, table);
}

function CollapserClick(evt) {
  var elem = evt.srcElement || evt.currentTarget;

  if (elem.ul_ref) {
    if (elem.ul_ref.className.indexOf('collapsed') > -1) {
      elem.ul_ref.className = 'inner-ul expanded';
      elem.innerHTML = "-)";
    } else {
      elem.ul_ref.className = 'inner-ul collapsed';
      elem.innerHTML = "+)";
    }
  }
}

var test_table = {
  "one": {
    "One": 1,
    "Two": 2,
    "Three": 3
  },
  "Two": {
    "One": "One",
    "Two": "Two",
    "Three": "Three"
  },
  "Four": "Four",
  "Five": {
    "Five": 5,
    "Six": 6,
    "Seven": 7
  },
  "Six": {
    "Six": 6,
    "Seven": 7,
    "Eight": 8,
    "Nine": 9,
    "Ten": {
      "One": 1,
      "Two": 2,
      "Three": 3,
      "Four": 4,
      "Five": 5,
      "Six": 6,
      "Seven": 7,
      "Eight": 8,
      "Nine": 9,
      "Ten": 10
    }
  }
};

buildTable(test_table);

#outerdiv {
  width: 100%;
  max-width: 400px;
  height: 80%;
  max-height: 750px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid grey;
  border-radius: 8px;
  background-color: #cccccc;
}
#innerdiv {
  width: 90%;
  max-width: 380px;
  height: 70%;
  max-height: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  vertical-align: middle;
  overflow: auto;
  border: 1px solid grey;
  border-radius: 5px;
  background-color: white;
}
.li-li {
  white-space: nowrap;
  list-style: none;
  margin: 3px 3px 3px 3px;
}
.li-group {
  display: inline-block;
}
.collapsed {
  display: none !important;
}
.expanded {
  display: inline-block !important;
}
.collapser {
  margin-right: 3px;
  padding: none;
}
.name-area {} .inner-ul {
  margin: 8px 8px 8px 0px;
}
.value-area {} .unav {
  color: grey;
}
* {
  font-family: "Open Sans", Vegur, sans-serif !important;
  letter-spacing: 0.01 em;
}

<div id="outerDiv">
  <div id="innerDiv">
    <ul id="innerUL">
    </ul>
  </div>
</div>

我的问题是 name div 和 collaser div 是 li 的子级，而 li 是 ul 的父级当 ul 展开时， 被推到 ul 的底部。有没有办法用纯 CSS 来解决这个问题？

Answer 1

可以添加

.li-group {
    vertical-align: top;
}

function buildTable(table) {
  this.iterateChildren = function(p_ul, table) {
    var li;
    for (var key in table) {
      li = document.createElement('li');
      li.className = "li-li";
      p_ul.appendChild(li);
      li.collapser = document.createElement('div');
      li.collapser.className = 'collapser li-group';
      li.collapser.addEventListener('click', CollapserClick, true);
      li.appendChild(li.collapser);
      li.name_area = document.createElement('div');
      li.name_area.className = 'name-area li-group';
      li.name_area.innerHTML = key;
      li.appendChild(li.name_area);
      if (typeof table[key] === 'object') {
        li.ul = document.createElement('ul');
        li.ul.className = 'inner-ul collapsed';
        li.appendChild(li.ul);
        li.collapser.innerHTML = '+)';
        li.collapser.ul_ref = li.ul;
        this.iterateChildren(li.ul, table[key]);
      } else {
        li.value_area = document.createElement('div');
        li.value_area.className = 'value-area li-group';
        li.name_area.innerHTML += ": ";
        if (table[key].toString().length) {
          li.value_area.innerHTML = table[key];
        } else {
          li.name_area.className += " unav";
          li.value_area.className += " unav";
          li.value_area.innerHTML = "N/A";
        }
        li.appendChild(li.value_area);
      }
    }
  }.bind(this);

  var inr_ul = document.getElementById('innerUL');
  this.iterateChildren(inr_ul, table);
}

function CollapserClick(evt) {
  var elem = evt.srcElement || evt.currentTarget;

  if (elem.ul_ref) {
    if (elem.ul_ref.className.indexOf('collapsed') > -1) {
      elem.ul_ref.className = 'inner-ul expanded';
      elem.innerHTML = "-)";
    } else {
      elem.ul_ref.className = 'inner-ul collapsed';
      elem.innerHTML = "+)";
    }
  }
}

var test_table = {
  "one": {
    "One": 1,
    "Two": 2,
    "Three": 3
  },
  "Two": {
    "One": "One",
    "Two": "Two",
    "Three": "Three"
  },
  "Four": "Four",
  "Five": {
    "Five": 5,
    "Six": 6,
    "Seven": 7
  },
  "Six": {
    "Six": 6,
    "Seven": 7,
    "Eight": 8,
    "Nine": 9,
    "Ten": {
      "One": 1,
      "Two": 2,
      "Three": 3,
      "Four": 4,
      "Five": 5,
      "Six": 6,
      "Seven": 7,
      "Eight": 8,
      "Nine": 9,
      "Ten": 10
    }
  }
};

buildTable(test_table);

#outerdiv {
  width: 100%;
  max-width: 400px;
  height: 80%;
  max-height: 750px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid grey;
  border-radius: 8px;
  background-color: #cccccc;
}
#innerdiv {
  width: 90%;
  max-width: 380px;
  height: 70%;
  max-height: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  margin-bottom: 5%;
  vertical-align: middle;
  overflow: auto;
  border: 1px solid grey;
  border-radius: 5px;
  background-color: white;
}
.li-li {
  white-space: nowrap;
  list-style: none;
  margin: 3px 3px 3px 3px;
}
.li-group {
  display: inline-block;
  vertical-align: top;
}
.collapsed {
  display: none !important;
}
.expanded {
  display: inline-block !important;
}
.collapser {
  margin-right: 3px;
  padding: none;
}
.name-area {} .inner-ul {
  margin: 8px 8px 8px 0px;
}
.value-area {} .unav {
  color: grey;
}
* {
  font-family: "Open Sans", Vegur, sans-serif !important;
  letter-spacing: 0.01 em;
}

<div id="outerDiv">
  <div id="innerDiv">
    <ul id="innerUL">
    </ul>
  </div>
</div>