最後のレベルの要素でCSSのプロパティを削除するには？

Question

私はこれを持っていますcode snippet。 htmlジェネレータの制限された権利のために、私はHTMLで何もできません、いくつかのCSSとJavaScriptコードを挿入するだけです。

私は2つのことをしたい：

• 最後のレベル要素（class="project child leaf "）
• 変更からプラス記号を削除し、プラスマイナス記号にクリックの方法。私はaddClassまたはremoveClassにtoggleを記述する必要がなく、実装する方法が分からないことを知っている:(

私を助けてください。

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

Answer 2

をから+を削除するには最後の子供:last-of-type擬似セレクタを使用して、既存のスタイルルールの後ろにそれを追加します。クリックしてsymoblを変更するには、clasを切り替えて、そのクラスのコンテンツは-です。私は次の点で+を削除しました。

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