javascript - 如何删除最后一级元素中的CSS属性？

Question

我有这个code snippet 。由于html生成器的权限有限，我无法对html做任何事情，只能插入一些css和javascript代码。

我想做两件事:

• 删除最后一级元素的加号 (class="project child leaf ")
• 根据点击将加号改为减号。我知道我必须将 toggle 写入 addClass 或 removeClass 但不知道如何实现:(

请帮助我。

$(function() {
  $('li.child>ul.projects li.child').children('li>ul').hide();
  //'li.child>ul.projects li.child').children('li>ul:first').show();

});
$("li").on("click", function(e) {
  e.stopPropagation();
  $(this).children('ul').toggle();

});

ul {
  list-style-type: none;
}

ul > li.child:before {
  content: "+";
  position: absolute;
  margin-left: -1.1em;
}

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

<div id="projects-index">
  <ul class='projects root'>
    <li class='root'>
      <div class='root'><a class="project root parent " href="/redmine/projects/abc">Company projects</a></div>
      <ul class='projects '>
        <li class='child'>
          <div class='child'><a class="project child parent " href="/redmine/projects/abc">A-1.abc</a></div>
          <ul class='projects '>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/a-research">A. research</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/test-rds">1. rds</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/test-bgx">test-bgx</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/3d">3. 3d</a></div>
                </li>
              </ul>
            </li>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/b-shop">B. shop</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/du">1. DU</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf my-project" href="/redmine/projects/d2m">D2m</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/m2s">3. m2s</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/korean">4. korean</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/2msms">6. C2msms</a></div>
                </li>
              </ul>
            </li>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/c-others">C. Others</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/summary">1. summary</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/group">2. group</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/yearly">3. yearly</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/prj">prj</a></div>
                </li>
              </ul>
            </li>
          </ul>
        </li>

Answer 1

试试这个:

$(document).ready(function(){
  $('li').click(function(){
    if($(this).has('ul').length) {
      $(this).children('ul').toggleClass('show');
      $(this).not('.root').toggleClass('sbl');
    }
  }).click(function(e){
    return false;
  })
  $('li').each(function(e){
    if(!$(this).has('ul').length) {
      $(this).addClass('sbl');
    }
  })
})

 ul {
  list-style-type: none;
}

li:not(.root) ul{
  display: none;
}

ul > li.child:before {
  content: "+";
  position: absolute;
  margin-left: -1.1em;
  cursor: pointer;
} 

.show {
  display: inline-block!important;
}

.sbl:before {
  content: '-'!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Projects</h2>
<div id="projects-index">
  <ul class='projects root'>
    <li class='root'>
      <div class='root'><a class="project root parent " href="/redmine/projects/abc">Company projects</a></div>
      <ul class='projects '>
        <li class='child'>
          <div class='child'><a class="project child parent " href="/redmine/projects/abc">A-1.abc</a></div>
          <ul class='projects '>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/a-research">A. research</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/test-rds">1. rds</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/test-bgx">test-bgx</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/3d">3. 3d</a></div>
                </li>
              </ul>
            </li>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/b-shop">B. shop</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/du">1. DU</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf my-project" href="/redmine/projects/d2m">D2m</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/m2s">3. m2s</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/korean">4. korean</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/2msms">6. C2msms</a></div>
                </li>
              </ul>
            </li>
            <li class='child'>
              <div class='child'><a class="project child parent " href="/redmine/projects/c-others">C. Others</a></div>
              <ul class='projects '>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/summary">1. summary</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/group">2. group</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/yearly">3. yearly</a></div>
                </li>
                <li class='child'>
                  <div class='child'><a class="project child leaf " href="/redmine/projects/prj">prj</a></div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        </ul>
    </li>
  </ul>
</div>