如何删除最后一级元素中的css属性？

时间：2017-11-10 02:53:57

标签： javascript jquery css

我有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>

2 个答案:

答案 0 :(得分：0)

从最后一个子项中删除+在添加它的现有样式规则之后使用:last-of-type伪选择器。要更改点击上的symobl，请切换一个clas，并让该类的:before内容为-。我只删除了以下+。

$(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;
}

ul > li.child:last-of-type:before {
  content: "";
}
<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>

答案 1 :(得分：0)

试试这个： 

$(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>

相关问题
最新问题