Hide/Show 单击时的元素

Question

我需要有关如何隐藏第二级 ul 和 li 并仅在单击第一级 li 时才显示它的帮助。由于某种原因，我找不到在 html 部分添加 onclick() 函数的文档。这可能吗？寻找 js 和 css 来让它工作。提前致谢。

因此，默认情况下，列表应如下所示：

Abgasanlage
Steuerkettenantrieb

单击 Abgasanlage 时，将打开其子类别，如下所示：

Abgasanlage

传感器

Steuerkettenantrieb

单击 Steuerkettenantrieb 时，将打开其子类别，如下所示：

Abgasanlage
Steuerkettenantrieb

Steuerkettensätze
Steuerketten
Gleitschienen
Kettendeckel
里策尔

这是 html 代码：

<ul class="sidebar_cate">
    <li class="grid__item lvl-1  active">
        <a href="/collections/abgasanlage" class="site-nav lvl-1">Abgasanlage</a>
            <ul class="subLinks">
                <li class="lvl-2">
                    <a href="/collections/sensoren" class="site-nav lvl-2">Sensoren</a>
                </li>
            </ul>
    </li>
    <li class="grid__item lvl-1 ">
        <a href="/collections/steuerket-tenantrieb" class="site-nav lvl-1">Steuerkettenantrieb</a>
            <ul class="subLinks">
                <li class="lvl-2">
                    <a href="/collections/steuerkettensatze" class="site-nav lvl-2">Steuerkettensätze</a></li>
                <li class="lvl-2">
                    <a href="/collections/steuerketten" class="site-nav lvl-2">Steuerketten</a></li>
                <li class="lvl-2">
                    <a href="/collections/gleitschienen" class="site-nav lvl-2">Gleitschienen</a></li>
                <li class="lvl-2">
                    <a href="/collections/kettendeckel-und-kettenrader-ritzel" class="site-nav lvl-2">Kettendeckel</a></li>
                <li class="lvl-2">
                    <a href="/collections/ritzel" class="site-nav lvl-2">Ritzel</a></li>
            </ul>
    </li>
</ul>

Answer 1

我认为它可以在你的 js 文件中解决，在一个函数中使用这些代码行，将选定的超级项目 ID 作为参数

  function ShowHideItem(selectedItem)  {  
switch (selectedItem)
{
case xxx :       
 document.getElementById("Item1").style.visibility="hidden";  
 document.getElementById("Item2").style.visibility="hidden";   
break;
}
    }

Answer 2

这可以与Js和CSS一起完成。

先给一个classsubLinks给内在的UL。然后用 CSS.

隐藏它

ul li > .subLinks {
    display: none
}

然后在每个里写一个点击事件，检查内部sublinks是否存在然后将active class添加到li元素。基于 active class 显示内部列表 css.

JS

$("#nested-list li").click(function(e) {
    if ( $(this).children("ul").length ) {
        $(this).toggleClass('active');
    }
});

CSS

ul li.active > .subLinks {
    display: block
}

查看我创建的示例。 https://stackblitz.com/edit/nested-ul-li-list-toggle-basic 这是一个显示如何实现它的基本示例，您可以根据需要进一步自定义它并添加更多检查以防止单击 link 等

Hide/Show 单击时的元素

Hide/Show Element when Clicked

html

javascript

css

shopify