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

Question

我在菜单的移动设备上看到了侧边栏菜单。我的问题是，仅当有人单击+图标时，菜单“类别”才崩溃。如果我单击名称，则什么都不会发生。点击名称，如何也可以打开菜单

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

Website

Answer 1

  

用它替换您的li代码，这是可行的

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

Answer 2

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

如您在代码中所见，a标签“ Kategorie”不属于hitarea选择器，因为您之前已经关闭了div。

我看到的第二件事是，首先有一个未封闭的 <li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-435"标签。

请向我们提供更多信息。

Answer 3

类别Kategorie <a href="#">Kategorie</a>必须在里面

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

就像这里：

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

此后，您必须更改CSS：

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