单击时隐藏显示子类别 css

Question

当我 check/select "Automobiles" 时，我正在努力弄清楚如何 display/hide 子类别 "Auto Parts"。我查看了此处发布的许多示例，但其中 none 对我有用。此外，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

您可以使用一个简单的 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>

Answer 2

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

为了在 CSS 中使用点击，您可以使用 :checked 然后再使用 ~ 或 + 为另一个 class 名称制作特定样式。

.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/

单击时隐藏显示子类别 css

Hide Display subcategories on click css

html

css

hide