单击css时隐藏显示子类别

Question

当我检查/选择“汽车”时，我正在努力弄清楚如何显示/隐藏子类别“汽车零件”。我查看了很多在这里发布的例子，但没有一个能为我工作。此外，html来自插件，所以我没有太多的控制权。

提前致谢。 / *

 <div> 

    <li id="category-3"><label class="selectit"><input class=" category_57" value="3" type="checkbox" name="category[]" id="in-category-3"> Automobiles</label>
    <ul class="children">
    <li id="category-14"><label class="selectit"><input class=" category_57" value="14" type="checkbox" name="category[]" id="in-category-14"> Auto Parts</label></li>
    </ul>
  </li>
</div>

*/

Answer 1

https://jsfiddle.net/n4ko0eeo/66/

为了在CSS中单击使用你可以通过使用:checked来实现它，然后使用〜或+为另一个类名创建一个特定的样式。

.category_57:checked ~ ul {
   display: none;
}

 <div> 

    <li id="category-3">
    <input class="category_57" value="3" type="checkbox" name="category[]" id="in-category-3"> 
        <label class="selectit" for="in-category-3">Automobiles</label>
    <ul class="children" >
    <li id="category-14" class="category-14">
    <input class=" category_57" value="14" type="checkbox" name="category[]" id="in-category-14">
    <label class="selectit" for="in-category-3" >Auto Parts</label></li>
    </ul>
  </li>

</div>

或者使用jQuery

请确保在HTML文件中导入jquery脚本

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

 $("#category-3 label input").click(function(){
   if ( $('#category-3').is('.hideMenu') ) {
		$('#category-3').removeClass('hideMenu');
		$('.children').fadeIn(400);
   }else {
   		$('#category-3').addClass('hideMenu');
		$('.children').fadeOut(400);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 
    <li id="category-3"><label class="selectit"><input class=" category_57" value="3" type="checkbox" name="category[]" id="in-category-3"> Automobiles</label>
    <ul class="children">
    <li id="category-14"><label class="selectit"><input class=" category_57" value="14" type="checkbox" name="category[]" id="in-category-14"> Auto Parts</label></li>
    </ul>
  </li>
</div>

https://jsfiddle.net/Liamm12/skos6xbb/40/

Answer 2

您可以使用简单的JavaScript函数执行此操作：

var elem1 = document.getElementById("in-category-3");
var elem2 = document.getElementById("category-14");

elem1.onclick = function() {
    if (elem2.style.display === "none") {
        elem2.style.display = "block";
    } else {
        elem2.style.display = "none";
    }
}

<div> 
    <li id="category-3">
      <label class="selectit">
        <input class="category_57" value="3" type="checkbox" name="category[]" id="in-category-3"> Automobiles
      </label>
      
      <ul class="children">
        <li id="category-14">
          <label class="selectit">
            <input class=" category_57" value="14" type="checkbox" name="category[]" id="in-category-14"> Auto Parts
          </label>
        </li>
      </ul>
    </li>
</div>