没有jQuery的可折叠类别列表

Question

我正在一家eBay商店里工作。在按照ebay的指南单击根项目（如果可能的话）之后，我需要使类别可折叠。

规则：

• Ebay不想我们使用活动内容，这意味着没有Java脚本，即是Flash。
• 它仅允许我们使用CSS3。
• 我们甚至无法更改类别的输出html。因此，唯一可用的选项是CSS。

HTML：

<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#">CAT A</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT B</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT C</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

感谢您阅读此问题。如果您知道我如何做到这一点，请指出正确的方向。

Answer 1

因此，在深入研究此主题之后，此标记似乎对您的请求不可能。但只需对您提供的html进行少量调整，就可以使用以下最小样式来实现它：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:elevation="48dp"
            android:background="@android:color/background_light"
            app:itemIconTint="@android:color/primary_text_light"
            app:itemTextColor="@android:color/primary_text_light"
            app:menu="@menu/navbar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

*较小的调整=将ul的类更改为唯一的id。这样，：target伪元素可以影响它。

希望它能解决它，祝您好运！

Answer 2

好问题！因此，我刚刚发现了:focus-within的魔力。

<div id="org-categories">
  <div class="ttl">Shop home</div>
  <ul class="lev1">
    <li><a href="#">CAT A</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT B</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
    <li><a href="#">CAT C</a></li>
    <ul class="lev2">
      <li><a href="#">sub cat 1</a></li>
      <li><a href="#">sub cat 2</a></li>
    </ul>
  </ul>
</div>

然后魔术就来了：

li + .lev2 {
  display: none;
}

li:focus-within + .lev2 {
  display: block;
}

在fiddle

中签出

Answer 3

这里是一个有关如何执行此操作的示例。尽管这显示了展开的菜单，但它也具有一些视觉效果。试试看，让自己适应。代码本身来自http://www.dynamicdrive.com/

<style>

.bgslidemenu {
    font: bold 16px 'Bitter', sans-serif; /* use google font */
    position: relative;
    width: 100%;
}

.bgslidemenu:after { /* clear menu */
    content: '';
    clear: both;
    display: block;
}

/* Top Level Menu */
.bgslidemenu ul {
    z-index: 100;
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
    float: right; /* change to "left" to left align menu */
}

/* Top level list items */
.bgslidemenu ul li {
    position: relative;
    display: inline;
    margin-right: 20px; /* spacing between each top level menu item */
    float: left;
}

/* Top level menu items link style */
.bgslidemenu ul li a {
    display: block;
    position: relative;
    color: white;
    padding: 14px 10px;
    color: black;
    text-decoration: none;
}

.bgslidemenu ul li a:link, .bgslidemenu ul li a:visited {
    color: black;
}

/* Top level menu items link style on hover */
.bgslidemenu ul li:hover > a {
    color: purple !important;
}

/* LIs links with a sub UL style */
.bgslidemenu ul li > a {
    /* add padding to accomodate arrow inside LIs */
    padding-right: 25px;
}

/* LIs links with NO sub UL style */
.bgslidemenu ul li > a:only-child {
    /* undo padding for non submenu LIs */
    padding-right: 10px;
}

/* LIs links with a sub UL pseudo class (Add down arrow) */
.bgslidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top-color: black;
    top: 50%;
    transform: translateY(-20%);
    right: 8px;
}

/* LIs links with NO sub UL pseudo class */
.bgslidemenu ul li > a:only-child:after {
    /* undo arrow for non submenu LIs */
    display: none;
}

/* Sub ULs style */
.bgslidemenu ul li ul {
    position: absolute;
    left: -5000px;
    top: auto;
    opacity: 0;
    width: 200px; /* width of drop down menus */
    visibility: hidden;
    padding-top: 80px; /* Add large top padding to drop down menu */
    z-index: -1;
    background: #F3F3F3;
    transform: translateY(100px);
    -webkit-transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
    transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
}

/* Sub UL style on hover */
.bgslidemenu ul li:hover > ul {
    visibility: visible;
    left: -30px;
    transform: translateY(-80px); /* move drop down menu upwards (should be smaller than padding-top value above) */
    opacity: 1;
    -webkit-transition: opacity 1s, transform .5s;
    transition: opacity 1s, transform .5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.bgslidemenu ul li ul li {
    display: list-item;
    float: none;
    overflow: hidden;
}

/* Add animated line to sub menu item on Mouseover */
.bgslidemenu ul li ul li:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 5px;
    background: purple;
    left: 0;
    top: 50%;
    transform: translate3d(-100%, -50%, 0);
    transition: transform .3s;
}

.bgslidemenu ul ul li:hover:after {
    transform: translate3d(0, -50%, 0);
}

/* Sub Levels link style on hover and when active */
.bgslidemenu ul ul li:hover > a {
    color: purple !important;
}

/* Sub level menu links style */
.bgslidemenu ul li ul li a {
    font: normal 16px 'Bitter', sans-serif;
    padding: 10px;
    padding-left: 40px; /* Add left padding to sub menu links to accommodate animated line */
    position: relative;
    margin: 0;
}


/* ####### responsive layout CSS ####### */
@media (max-width: 700px) {
    /* 
            For mobile and screen browser windows
            Get Sub ULs to expand entire width of document and drop down
            Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
        */

    .bgslidemenu ul {
        float: none;
    }

    .bgslidemenu ul li {
        position: relative;
        display: block;
        width: 100%;
    }

    .bgslidemenu ul li ul {
        width: 100%;
        position: relative;
        border-top: 2px solid #eee;
        /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
        display: none;
    }

    .bgslidemenu ul li:hover > ul {
        display: block;
        padding-top: 0;
        transform: none;
        z-index: 10000;
        left: 0 !important;
        top: auto;
    }

    .bgslidemenu ul ul li:hover > ul {
        left: 0 !important;
        top: auto;
    }
}

</style>


<div class="bgslidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
  <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a>
  <ul>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
  </ul>
</li>
<li><a href="https://www.bluhm-de.com">Home</a></li>
</ul>
</div>