带有列的可折叠列表？答案

【问题标题】：Collapseble list with columns?带有列的可折叠列表？
【发布时间】：2016-10-03 14:06:52
【问题描述】：

我需要一个包含 3 列的分层可折叠列表。我有前两部分工作，但我似乎无法让第三部分的 CSS 完全正确。图为当前代码：

（col3 左侧略微重复的文本是小提琴的视觉错误。）

目标是在可折叠列表中创建一个三列伪表，以使 col1 具有标准列表缩进，并且 col2 在所有级别居中，而 col3 在所有级别都位于右侧。它应该是这样的：

我试图通过让它们都向右浮动然后向 col2 或 col3 添加边距/填充来实现这一点，以便将 col2 移向我想要的中间位置。然而，不知何故，col2 最终出现在 col3 的外部。对我来说似乎是不可能的，但使用 CSS 没有错误是不可能的。

我尝试了margins 和paddings 和float: lefts 的各种其他组合，但没有运气。

Here's an almost working fiddle.

HTML：

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

<body>
  <div id="listContainer">
    <div class="listControl">
      <a id="expandList"><button>Expand All</button></a>
      <a id="collapseList"><button>Collapse All</button></a>
    </div>
    <ul id="expList">
      <li>
        <div class="col1">Non-parent</div>
        <div class="col2">Col2</div>
        <div class="col3">Col3</div>
      </li>
      <li>
        <div class="col1">Parent</div>
        <div class="col2">Col2</div>
        <div class="col3">Col3</div>
        <ul>
          <li>
            <div class="col1">Child</div>
            <div class="col2">Col2</div>
            <div class="col3">Col3</div>
          </li>
        </ul>
      </li>
      <li>
        <div class="col1">Grandparent</div>
        <div class="col2">Col2</div>
        <div class="col3">Col3</div>
        <ul>
          <li>
            <div class="col1">Parent</div>
            <div class="col2">Col2</div>
            <div class="col3">Col3</div>
            <ul>
              <li>
                <div class="col1">Child</div>
                <div class="col2">Col2</div>
                <div class="col3">Col3</div>
              </li>
            </ul>
          </li>
          <li>
            <div class="col1">Parent</div>
            <div class="col2">Col2</div>
            <div class="col3">Col3</div>
            <ul>
              <li>
                <div class="col1">Child</div>
                <div class="col2">Col2</div>
                <div class="col3">Col3</div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</body>

CSS：

/********************/


/* EXPANDABLE LIST  */


/********************/

#listContainer {
  margin-top: 15px;
}

#expList ul,
#expList li {
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#expList p {
  margin: 0;
  display: block;
}

#expList p:hover {
  background-color: #121212;
}

#expList li {
  line-height: 140%;
  text-indent: 0px;
  background-position: 1px 8px;
  padding-left: 20px;
  background-repeat: no-repeat;
}


/*This works in Firefox following W3C standards, but not in other browsers!*/


/*https://drafts.csswg.org/css-lists/#marker-content*/


/* Collapsed state for list element */

#expList .collapsed {
  /*    list-style-type: "+";*/
  list-style: none;
  /*padding: 0px;*/
}


/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */

#expList .expanded {
  /*list-style-type: "-";*/
  list-style: none;
  /*padding: 0px;*/
}


/*code that works for non-Firefox*/

#expList .collapsed:before {
  content: "+";
  width: 1em !important;
  margin-left: -1.2em;
  display: inline-block;
}

#expList .expanded:before {
  content: "-";
  width: 1em !important;
  margin-left: -1.2em;
  display: inline-block;
}

#expList {
  clear: both;
}

.col1 {
  display: inline;
  /*padding-right: 100px;*/
}

.col2 {
  display: inline;
  float: right;
}

.col3 {
  display: inline;
  float: right;
}

JS：

/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
  $('#expList').find('li:has(ul)')
    .click(function(event) {
      if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
      }
      return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

  //Hack to add links inside the cv
  $('#expList a').unbind('click').click(function() {
    window.location($(this).attr('href'));
    return false;
  });

  //Create the button funtionality
  $('#expandList')
    .unbind('click')
    .click(function() {
      $('.collapsed').addClass('expanded');
      $('.collapsed').children('ul').show('medium');
    })
  $('#collapseList')
    .unbind('click')
    .click(function() {
      $('.collapsed').removeClass('expanded');
      $('.collapsed').children('ul').hide('medium');
    })

};

/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready(function() {
  prepareList()
});

【问题讨论】：

那么，到底是什么问题？
你的问题不清楚，你能提供想要的输出吗？我知道你试图解释它，但你的解释不是最清楚的。您能否说明您已经提供的图形以及所需的结果？
"我们的目标是在一个可折叠列表中有一个三列的伪表，这样 col1 具有标准列表缩进，col2 在所有级别居中，col3 在所有级别都位于右侧。 "这就是我要的。对我来说似乎很清楚。我添加了一张图纸。
@Deleet 你想要this what (jsfiddle)吗？
我看不出有什么大的不同。看起来你只是增加了宽度？看上面的图。你的列也有错误的顺序（我的尝试也是如此）。

标签： javascript jquery html css list

【解决方案1】：

对此的解决方案是意识到float: right 显然也使块右对齐，因此它们以相反的顺序出现。考虑到这一点，您只需切换块的顺序即可恢复正常顺序。

例如：

<div class="col1">Non-parent</div>
<div class="col4">Col4</div>
<div class="col3">Col3</div>
<div class="col2">Col2</div>

Working fiddle.

【讨论】：