初始加载问题时折叠树节点

Question

希望您今天通过帮助我能够获得一些好的业力。

我有一些 Wix Velo 站点的代码，运行良好，但在加载时不断打开所有树元素。

请有人看一下并建议如何启动折叠的树节点？

这是为一所特殊需要学校而设的，而且我没有报酬，所以这绝对是为了一个好的理由！

干杯，

[https://codepen.io/jimbbobleeharry/pen/VwrEage][1]

<style>
  .plus,
  .minus {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px !important;
    width: 16px;
    height: 16px;
    /*vertical-align: middle;*/
  }
  
  .plus {
    background-image: url(https://img.icons8.com/color/48/000000/plus.png);
  }
  
  .minus {
    background-image: url(https://img.icons8.com/color/48/000000/minus.png);
  }
  
  ul {
    list-style: none;
    padding: 0px 0px 0px 5px;
  }
  
  ul.inner_ul li:before {
    content: "├";
    font-size: 18px;
    margin-left: -11px;
    margin-top: -5px;
    vertical-align: middle;
    float: left;
    width: 8px;
    color: #41424e;
  }
  
  ul.inner_ul li:last-child:before {
    content: "└";
  }
  
  .inner_ul {
    padding: 0px 0px 0px 35px;
  }
  
  .w-50 {
    width: 50%;
  }
  
  .d-flex {
    display: flex;
    color: #a57164;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
  }
  
  .selected-node {
    color: chocolate;
  }
</style>
<div class="d-flex">
  <div class="tree_main w-50">
    <ul id="bs_main" class="main_ul">
      <li id="bs_1">
        <span class="plus minus">&nbsp;</span>
        <input type="checkbox" id="c_bs_1">

        <span class="title">
                ADHD </span>
        <ul id="bs_l_1" class="sub_ul">
          <li id="bf_1">
            <span class="plus minus">&nbsp;</span>
            <input type="checkbox" id="c_bf_1">
            <span class="title">
                        Verbal</span>
            <ul id="bf_l_1" style="display: block;" class="inner_ul">
              <li id="io_1">
                <input type="checkbox" id="c_io_1">
                <span class="title">
                                Catch, Match and Redirect </span>
              </li>
              <li id="io_2">
                <input type="checkbox" id="c_io_2">
                <span class="title">
                                Entering shared space scripts </span>
              </li>
            </ul>
          </li>
          <li id="bf_2">
            <span class="plus minus">&nbsp;</span>
            <input type="checkbox" id="c_bf_2">
            <span class="title">
                        Non-Verbal</span>
            <ul id="bf_1_2" class="inner_ul">
              <li id="io_5">
                <input type="checkbox" id="c_io_5">
                <span class="title">
                                Signing and hand signals </span>
              </li>
              <li id="io_6">
                <input type="checkbox" id="c_io_6">
                <span class="title">
                                Voices off timer </span>
              </li>
            </ul>
          </li>
          <li id="bf_3">
            <span class="plus minus">&nbsp;</span>
            <input type="checkbox" id="c_bf_3">
            <span class="title">
                        Other</span>
            <ul id="bf_l_3" class="inner_ul">
              <li id="io_7">
                <input type="checkbox" id="c_io_7">
                <span class="title">
                                Environmental barriers to aid focus </span>
              </li>
              <li id="io_8">
                <input type="checkbox" id="c_io_8">
                <span class="title">
                                Are routines embedded? Could they be? </span>
              </li>
              <li id="io_9">
                <input type="checkbox" id="c_io_9">
                <span class="title">
                                Lead Learner not key person (to avoid attachement compliciations) </span>
              </li>
            </ul>
          </li>
        </ul>
      </li>

Answer 1

您可以使用 javascript 来处理此问题：

<style>
  .plus,
  .minus {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px !important;
    width: 16px;
    height: 16px;
    cursor: pointer;
    /*vertical-align: middle;*/
  }
  
  .plus {
    background-image: url(https://img.icons8.com/color/48/000000/plus.png);
  }
  
  .minus {
    background-image: url(https://img.icons8.com/color/48/000000/minus.png);
  }
  
  ul {
    list-style: none;
    padding: 0px 0px 0px 5px;
  }
  
  ul.inner_ul li:before {
    content: "├";
    font-size: 18px;
    margin-left: -11px;
    margin-top: -5px;
    vertical-align: middle;
    float: left;
    width: 8px;
    color: #41424e;
  }
  
  ul.inner_ul li:last-child:before {
    content: "└";
  }
  
  .inner_ul {
    padding: 0px 0px 0px 35px;
  }
  
  .w-50 {
    width: 50%;
  }
  
  .d-flex {
    display: flex;
    color: #a57164;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
  }
  
  .selected-node {
    color: chocolate;
  }
  .inner-content{
    display: inline;
  }
 .hide{
    
    display: none;
 }
</style>
<div class="d-flex">
  <div class="tree_main w-50">
    <ul id="bs_main" class="main_ul">
      <li id="bs_1">
        <span class="plus minus"> </span>
        <input type="checkbox" id="c_bs_1">

        <span class="title">
                ADHD </span>
        <ul id="bs_l_1" class="sub_ul">
          <li id="bf_1">
            <span class="plus minus collapsible"> </span>
            <div class="inner-content">
                <input type="checkbox" id="c_bf_1">
                <span class="title">
                            Verbal</span>
                <ul id="bf_l_1" style="display: block;" class="inner_ul">
                  <li id="io_1">
                    <input type="checkbox" id="c_io_1">
                    <span class="title">
                                    Catch, Match and Redirect </span>
                  </li>
                  <li id="io_2">
                    <input type="checkbox" id="c_io_2">
                    <span class="title">
                                    Entering shared space scripts </span>
                  </li>
                </ul>
            </div>
          </li>
          <li id="bf_2">
            <span class="plus minus collapsible"> </span>
            <div class="inner-content">
                <input type="checkbox" id="c_bf_2">
                <span class="title">
                            Non-Verbal</span>
                <ul id="bf_1_2" class="inner_ul">
                  <li id="io_5">
                    <input type="checkbox" id="c_io_5">
                    <span class="title">
                                    Signing and hand signals </span>
                  </li>
                  <li id="io_6">
                    <input type="checkbox" id="c_io_6">
                    <span class="title">
                                    Voices off timer </span>
                  </li>
                </ul>
            </div>
          </li>
          <li id="bf_3">
            <span class="plus minus collapsible"> </span>
            <div class="inner-content">
                <input type="checkbox" id="c_bf_3">
                <span class="title">
                            Other</span>
                <ul id="bf_l_3" class="inner_ul">
                  <li id="io_7">
                    <input type="checkbox" id="c_io_7">
                    <span class="title">
                                    Environmental barriers to aid focus </span>
                  </li>
                  <li id="io_8">
                    <input type="checkbox" id="c_io_8">
                    <span class="title">
                                    Are routines embedded? Could they be? </span>
                  </li>
                  <li id="io_9">
                    <input type="checkbox" id="c_io_9">
                    <span class="title">
                                    Lead Learner not key person (to avoid attachement compliciations) </span>
                  </li>
                </ul>
            </div>
          </li>
        </ul>
      </li>




 <script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var innerContent = this.nextElementSibling;
    innerContent.classList.toggle("hide");
  });
}
</script>

我更改了一些 HTML 结构，并向您的代码中添加了一些 CSS。

此外，您还可以将分钟更改为加号。只需使用 javascript 事件并做出更好的事情即可。