Question

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

提前致谢。 / *

override fun run(configuration: BackendConfig, environment: Environment) {
    // ...
    addServletFilter(CrossOriginFilter::class.java, environment).apply {
        setInitParameter("allowedOrigins", "*")
        setInitParameter("allowedHeaders", "Content-Type,Accept,Origin," + CsrfProtectionFilter.HEADER_NAME)
        setInitParameter("allowedMethods", "OPTIONS,GET,PUT,POST,DELETE,HEAD")
    }
}

private fun addServletFilter(filterClass: Class<out Filter>, environment: Environment): FilterRegistration.Dynamic {
    val filter = environment.servlets().addFilter(filterClass.simpleName, filterClass)
    filter.addMappingForUrlPatterns(EnumSet.allOf(DispatcherType::class.java), true, environment.jersey().urlPattern)
    return filter
}

* /

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来完成它，然后使用〜或 + 来为另一个人创建一个特定的样式班级名称。

＆＃13;

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

＆＃13;

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

＆＃13;

或使用jQuery

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

单击css时隐藏显示子类别

2 个答案: