javascript - 画一条垂直线让用户明白两个 li 元素组成一个组

Question

我的 HTML 页面包含多个 LI 元素，我想在我的 LI 元素上添加分组功能。例如，对于元素“college”和“automobile”，我想应用分组，并且我已经应用了相同的 groupid它们并应用边距来区分它们。但我想应用一条垂直线，以便用户可以正确理解这两个 LI 元素是分组的。就像这个。

<div>
  <ul>
    <li title="Insurance">
      <div>
        <input type="checkbox" />
        <span>Malpractice</span>
      </div>
    </li>
    <li title="Construction">
      <div>
        <input type="checkbox" />
        <span>Carpentry</span>
      </div>
    </li>

    <li title="Education" id="grp1" style="margin-left:20px;">
      <div>
        <input type="checkbox" />
        <span>College</span>
      </div>
    </li>
    <li title="Insurance" id="grp1" style="margin-left:20px;">
      <div>
        <input type="checkbox" />
        <span>Automobile</span>
      </div>
    </li>

    <li title="Education">
      <div>
        <input type="checkbox" />
        <span>Iron Worker</span>
      </div>
    </li>
    <li title="Insurance">
      <div>
        <input type="checkbox" />
        <span>High School</span>
      </div>
    </li>

  </ul>
</div>

Answer 1

这是您要找的吗？

$(document).on("click", "ul", function() {
  alert("Clicked!");
})

.grouped {
  border-left: solid 15px pink;
  margin: 0;
  padding: 0;
}

.grouped:before {
  font-family: fontAwesome;
  content: "\f03a";
  font-size: 10px;
  position: absolute;
  left: 10px;
  top: 10px;
  cursor: pointer;
  pointer-events: all;
}

.grouped li {
  list-style: none;
}

.grouped li span {
  padding-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="grouped">
  <li><input type="text"><span>College</span></li>
  <li><input type="text"><span>Automobile</span></li>
</ul>