Question

我试图在不使用Jquery的情况下在未单击和单击状态之间切换css按钮文本。我见过的大多数示例使用单个类定义行为和复制，但我想在具有不同链接文本的同一页面上多次重复使用此功能。

具体来说，我试图将初始unicode字符从＆amp;＃9660更改为＆amp;＃9650（向下箭头到向上箭头），这样我就可以在链接文本之前添加带有span类的字符，但是我可以点击按钮后仍然切换？

注意：需要使用下面的javascript来解决SharePoint中的兼容性模式问题。

＆＃13;

var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
    var label = labels[i];
    (function(div){
        label.onclick = function(){
            if(div.style.display == "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
            }
        };
    })(label.parentNode.querySelector("div"));
}

＆＃13;

.collapse{
  cursor: pointer;
  display: block;
  color: #6490d6;
background: #fff;
min-width: 180px;
        border-radius: 10px;
        padding: 5px 10px;
        display: inline-block;
        font-family: calibri;
        font-weight: bold;
        color: #6490d6;
        text-decoration: none;
        text-shadow:0px 1px 0px #fff;
        border:1px solid #a6a6a6;
        margin:0px auto;
        margin-top: -5px;
        box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
        -webkit-transition:box-shadow 0.5s;
}
.collapse:hover {
background: #ECECEC;
  text-decoration: none;
color: orange;
}
.collapse + input {
  display: none;
  /* hide the checkboxes */
}
.collapse + input + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}

＆＃13;

<div style="padding-left: 5%;width:450px;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div>
<br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span>

<br/><br/>

<div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>N/A</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>N/A</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

<div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label>
<input id="_4" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>


</div>

＆＃13;

Answer 1

更新

仅限CSS - 代码段2

好的，这是一个纯CSS解决方案，没有JS / jQuery。必须更改前2个规则集，然后添加最后2个。

input {
  display: none;
  /* hide the checkboxes */
}
input + .collapse + div {
  display: none;
}

[type='checkbox'] + label::before {
  content: '▲';
}
[type='checkbox']:checked + label::before {
  content: '▼';
}

我还换了checkbox和<labels>的位置。 checkbox现在位于<label>。

之前

<div>
<input id="_4" type="checkbox"/>
<label class="collapse" for="_4">&nbsp;&nbsp;dropdown four</label>

<小时/> JavaScript＆amp; CSS - 代码段1

CSS的简单添加和添加到每个<label>的类：

label.up::before {
  content: '▲';
}
label.down::before {
  content: '▼';
}

将班级.up添加到每个标签：

<label class='collapse up'...

哎呀我忘记了我使用了lil JS：

label.onclick = function() {
  if (div.style.display == "block") {
    div.style.display = "none";
    this.classList.remove('down');
    this.classList.add('up');
  } else {
    div.style.display = "block";
    this.classList.remove('up');
    this.classList.add('down');
  }
};

SNIPPET 1

var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
  var label = labels[i];
  (function(div) {
    label.onclick = function() {
      if (div.style.display == "block") {
        div.style.display = "none";
        this.classList.remove('down');
        this.classList.add('up');
      } else {
        div.style.display = "block";
        this.classList.remove('up');
        this.classList.add('down');
      }
    };
  })(label.parentNode.querySelector("div"));
}

.collapse {
  cursor: pointer;
  display: block;
  color: #6490d6;
  background: #fff;
  min-width: 180px;
  border-radius: 10px;
  padding: 5px 10px;
  display: inline-block;
  font-family: calibri;
  font-weight: bold;
  color: #6490d6;
  text-decoration: none;
  text-shadow: 0px 1px 0px #fff;
  border: 1px solid #a6a6a6;
  margin: 0px auto;
  margin-top: -5px;
  box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
  -webkit-transition: box-shadow 0.5s;
}
.collapse:hover {
  background: #ECECEC;
  text-decoration: none;
  color: orange;
}
.collapse + input {
  display: none;
  /* hide the checkboxes */
}
.collapse + input + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}
label.up::before {
  content: '▲';
}
label.down::before {
  content: '▼';
}

<div style="padding-left: 5%;width:450px;">
  <div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong>
  </div>
  <br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span>

  <br/>
  <br/>

  <div>
    <label class="collapse up" for="_1">&nbsp;&nbsp;dropdown one</label>
    <input id="_1" type="checkbox" />
    <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel.
      Mauris vitae risus lorem.
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/>Architecture</td>
            <td width="50%"><strong>Template</strong>
              <br/>View the <a href="#">Architecture Waiver Record template</a>
            </td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>Architecture Lead</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>

  <div>
    <label class="collapse up" for="_2">&nbsp;&nbsp;drop down two</label>
    <input id="_2" type="checkbox" />
    <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel.
      Mauris vitae risus lorem.
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/><a href="#" title="Project Manager">PM</a>
            </td>
            <td width="50%"><strong>Template</strong>
              <br/>N/A</td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>N/A</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>

  <div>
    <label class="collapse up" for="_3">&nbsp;&nbsp;dropdown three</label>
    <input id="_3" type="checkbox" />
    <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel.
      Mauris vitae risus lorem.
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/><a href="#" title="Project Manager">PM</a>
            </td>
            <td width="50%"><strong>Template</strong>
              <br/>View the <a href="#">Communication Matrix template</a>.</td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a>
            </td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>

  <div>
    <label class="collapse up" for="_4">&nbsp;&nbsp;dropdown four</label>
    <input id="_4" type="checkbox" />
    <div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cruada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris
      vitae risus lorem.
      <br/>

      <table>
        <tbody>
          <tr>
            <td width="50%"><strong>Artifact Owner</strong>
              <br/><a href="#" title="Business Analyst">BA</a>
            </td>
            <td width="50%"><strong>Template</strong>
              <br/>View the <a href="#">Current State Business Process Models template</a>
            </td>
          </tr>
          <tr>
            <td width="50%"><strong>Approver</strong>
              <br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td>
            <td width="50%"><strong>Sample</strong>
              <br/>N/A</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>


</div>

SNIPPET 2

var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
    var label = labels[i];
    (function(div){
        label.onclick = function(){
            if(div.style.display == "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
            }
        };
    })(label.parentNode.querySelector("div"));
}

.collapse{
  cursor: pointer;
  display: block;
  color: #6490d6;
background: #fff;
min-width: 180px;
        border-radius: 10px;
        padding: 5px 10px;
        display: inline-block;
        font-family: calibri;
        font-weight: bold;
        color: #6490d6;
        text-decoration: none;
        text-shadow:0px 1px 0px #fff;
        border:1px solid #a6a6a6;
        margin:0px auto;
        margin-top: -5px;
        box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
        -webkit-transition:box-shadow 0.5s;
}
.collapse:hover {
background: #ECECEC;
  text-decoration: none;
color: orange;
}
input {
  display: none;
  /* hide the checkboxes */
}
input + .collapse + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}
[type='checkbox'] + label::before {
  content: '▲';
}
[type='checkbox']:checked + label::before {
  content: '▼';
}

<div style="padding-left: 5%;width:450px;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div>
<br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span>

<br/><br/>

<div>
  <input id="_1" type="checkbox"/>
  <label class="collapse" for="_1">&nbsp;&nbsp;dropdown one</label>

<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div>
  <input id="_2" type="checkbox"/>
  <label class="collapse" for="_2">&nbsp;&nbsp;drop down two</label>

<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>N/A</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>N/A</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div>
  <input id="_3" type="checkbox"/>
  <label class="collapse" for="_3">&nbsp;&nbsp;dropdown three</label>

<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

<div>
  <input id="_4" type="checkbox"/>
  <label class="collapse" for="_4">&nbsp;&nbsp;dropdown four</label>

<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>


</div>

Answer 2

＆＃13;

var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
    var label = labels[i];
    (function(div){
        label.onclick = function(){
            if(div.style.display == "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
            }
        };
    })(label.parentNode.querySelector("div"));
}

＆＃13;

.collapse{
  cursor: pointer;
  display: block;
  color: #6490d6;
background: #fff;
min-width: 180px;
        border-radius: 10px;
        padding: 5px 10px;
        display: inline-block;
        font-family: calibri;
        font-weight: bold;
        color: #6490d6;
        text-decoration: none;
        text-shadow:0px 1px 0px #fff;
        border:1px solid #a6a6a6;
        margin:0px auto;
        margin-top: -5px;
        box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
        -webkit-transition:box-shadow 0.5s;
}
.collapse:hover {
background: #ECECEC;
  text-decoration: none;
color: orange;
}
.collapse + input {
  display: none;
  /* hide the checkboxes */
}
.collapse + input + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}

＆＃13;

<div style="padding-left: 5%;width:450px;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div>
<br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span>

<br/><br/>

<div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>N/A</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>N/A</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

<div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label>
<input id="_4" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>


</div>

＆＃13;

Answer 3

我不太确定你是否希望箭头的初始状态为向上或向下，但看起来你在初始HTML中将它们设置为向下...如果需要，可以轻松切换它们。

无论如何，我只在你的if语句中加了两行：

if(div.style.display == "block") {
    div.style.display = "none";
    this.innerHTML = '&#x25BC;' + this.innerHTML.substring(1,label.innerHTML.length);
} else {
    div.style.display = "block";
    this.innerHTML = '&#9650;' + this.innerHTML.substring(1,label.innerHTML.length);
}

每一行从标签的innerHTML中删除第一个字符（Unicode箭头），并用新箭头替换它。

请记住，只有当Unicode字符是innerHTML中的第一个字符时，这才有效。

var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
    var label = labels[i];
    (function(div){
        label.onclick = function(){
            if(div.style.display == "block"){
                div.style.display = "none";
                this.innerHTML = '&#x25BC;' + this.innerHTML.substring(1,label.innerHTML.length);
            }else{
                div.style.display = "block";
              this.innerHTML = '&#9650;' + this.innerHTML.substring(1,label.innerHTML.length);
            }
        };
    })(label.parentNode.querySelector("div"));
}

.collapse{
  cursor: pointer;
  display: block;
  color: #6490d6;
background: #fff;
min-width: 180px;
        border-radius: 10px;
        padding: 5px 10px;
        display: inline-block;
        font-family: calibri;
        font-weight: bold;
        color: #6490d6;
        text-decoration: none;
        text-shadow:0px 1px 0px #fff;
        border:1px solid #a6a6a6;
        margin:0px auto;
        margin-top: -5px;
        box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
        -webkit-transition:box-shadow 0.5s;
}
.collapse:hover {
background: #ECECEC;
  text-decoration: none;
color: orange;
}
.collapse + input {
  display: none;
  /* hide the checkboxes */
}
.collapse + input + div {
  display: none;
}
table {
  border-collapse: separate;
  width: 100%;
  border: none;
}
td {
  padding-left: 10px;
  padding-top: 10px;
  vertical-align: top;
}
.artifact_top {
  padding: 10px;
  border: 1px solid lightgrey;
  margin: 10px;
  overflow: auto;
}

<div style="padding-left: 5%;width:450px;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong>These collapse using checkboxes</strong></div>
<br/><span style="font-family: calibri, verdana, arial, helvetica, sans-serif; font-size: 13.3333px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.</span>

<br/><br/>

<div><label class="collapse" for="_1">&#x25BC;&nbsp;&nbsp;dropdown one</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/>Architecture</td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Architecture Waiver Record template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Architecture Lead</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_2">&#x25BC;&nbsp;&nbsp;drop down two</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>N/A</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>N/A</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody></table>
</div>
</div>
<br/>

<div><label class="collapse" for="_3">&#x25BC;&nbsp;&nbsp;dropdown three</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Project Manager">PM</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Communication Matrix template</a>.</td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/>Project Team, Business Partner(s), <a href="#" title="Business Relationship Manager">BRM</a></td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>

<div><label class="collapse" for="_4">&#x25BC;&nbsp;&nbsp;dropdown four</label>
<input id="_4" type="checkbox"/>
<div class="artifact_top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum metus. Cras malesuada nisl tellus, id molestie sapien condimentum vitae. Nunc semper leo ac fringilla euismod. Proin semper eros quam, et sodales dolor eleifend vel. Mauris vitae risus lorem.<br/>

<table>
  <tbody><tr>
    <td width="50%"><strong>Artifact Owner</strong><br/><a href="#" title="Business Analyst">BA</a></td>
    <td width="50%"><strong>Template</strong><br/>View the <a href="#">Current State Business Process Models template</a></td>
  </tr>
    <tr>
    <td width="50%"><strong>Approver</strong><br/><a href="#" title="Business Relationship Manager">BRM</a>, Business partner</td>
    <td width="50%"><strong>Sample</strong><br/>N/A</td>
  </tr>
</tbody>
</table>
</div>
</div>
<br/>


</div>

在没有Jquery的情况下点击链接文本

3 个答案:

更新