Html 仅在图标上切换类别导航，而不在名称上切换类别导航

我在菜单的移动设备上有一个侧边栏菜单。我的问题是菜单“Kategorie”只有在有人点击+图标时才会崩溃。如果我点击这个名字，什么都不会发生。如何通过单击名称来打开菜单

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-433 collapsable"><div class="hitarea menu-item-hitarea menu-item-type-custom-hitarea menu-item-object-custom-hitarea menu-item-has-children-hitarea menu-item-433-hitarea collapsable-hitarea"></div><a href="#" class="">Kategorie</a>
<ul class="sub-menu" style="display: block;">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-399">
        <a href="https://verameyer.de/produkt-kategorie/lymph-o-fit/" class="">Lymph O Fit – Kompression</a>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-400">
        <a href="https://verameyer.de/produkt-kategorie/anita-sport/">Anita Sport</a>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4816">
        <a href="https://verameyer.de/produkt-kategorie/perfekte-shapewear/">Perfekte Shapewear – Nathlose Unterwäsche</a>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4459">
        <a href="https://verameyer.de/produkt-kategorie/bh/" class="hover">BH</a>
    </li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-435"
    <a href="https://verameyer.de/produkt-kategorie/uggs/">Uggs</a>
</li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4817 last">
        <a href="https://verameyer.de/produkt-kategorie/sale/">Sale</a>
    </li>
</ul>
</li>

我建议您首先查看jQuery。搜索负责切换激活器的选择器-首先，它看起来应该由
hitarea
来完成。此外，您应该向我们提供一些Javascript/jQuery代码，这样我们可以更好地帮助您

正如您在代码中所看到的，您的
a
-标记“Kategorie”不是
hitarea
选择器的一部分，因为您之前已经关闭了
div

我看到的第二件事是，有一个未关闭的第一个
菜单Kategorie
必须在里面


就像这里：

<div class="hitarea menu-item-hitarea menu-item-type-custom-hitarea menu-item-object-custom-hitarea menu-item-has-children-hitarea menu-item-433-hitarea expandable-hitarea"><a href="#">Kategorie</a></div>

用这个替换你的li代码，这是有效的


卡蒂戈里











@media only screen and (max-width: 1024px) {
  .hitarea {
        height: 30px;
        position: relative;
        width: 100%;
        display: flex;
  }
}

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-433 expandable"><div class="hitarea menu-item-hitarea menu-item-type-custom-hitarea menu-item-object-custom-hitarea menu-item-has-children-hitarea menu-item-433-hitarea expandable-hitarea" style="width:100%">
<span style="float:left">Kategorie</span>
</div>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-399"><a href="https://verameyer.de/produkt-kategorie/lymph-o-fit/">Lymph O Fit – Kompression</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-400"><a href="https://verameyer.de/produkt-kategorie/anita-sport/">Anita Sport</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4816"><a href="https://verameyer.de/produkt-kategorie/perfekte-shapewear/">Perfekte Shapewear – Nathlose Unterwäsche</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4459"><a href="https://verameyer.de/produkt-kategorie/bh/">BH</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-435"><a href="https://verameyer.de/produkt-kategorie/uggs/">Uggs</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4817 last"><a href="https://verameyer.de/produkt-kategorie/sale/">Sale</a></li>
</ul>
</li>