javascript - 移动响应菜单 - 如果出现子菜单(显示链接)

Question

尝试构建移动响应式菜单。有些元素在 li 下有一个“子菜单”类(站点是在 Wordpress 中构建的)

我想做的是在平板电脑/移动设备上，在父 li 上显示一个箭头，当单击链接时切换子菜单(允许我显示和隐藏子页面，但他们可以仍然可以访问)。

我的菜单标记如下所示:

<ul id="menu-site-menu" class="site-menu"><li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150"><a href="http://localhost/commercialexpert.co.uk/">Home</a></li>
<li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-has-children menu-item-171"><a href="http://localhost/commercialexpert.co.uk/why-us/">Why us</a>
<ul class="sub-menu">
    <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-175"><a href="http://localhost/commercialexpert.co.uk/why-us/our-experts/">Our Experts</a></li>
    <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="http://localhost/commercialexpert.co.uk/why-us/about-us/">About us</a></li>
    <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"><a href="http://localhost/commercialexpert.co.uk/why-us/testimonials/">Testimonials</a></li>
    <li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173"><a href="http://localhost/commercialexpert.co.uk/why-us/case-studies/">Case Studies</a></li>
    <li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="http://localhost/commercialexpert.co.uk/why-us/faqs/">FAQ’s</a></li>
</ul>
</li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155"><a href="http://localhost/commercialexpert.co.uk/finance/">Finance</a>
<ul class="sub-menu">
    <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://localhost/commercialexpert.co.uk/finance/commercial-mortgage/">Commercial Mortgage</a></li>
    <li id="menu-item-157" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-157"><a href="http://localhost/commercialexpert.co.uk/finance/bridging-finance/">Bridging Finance</a></li>
    <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://localhost/commercialexpert.co.uk/finance/development-finance/">Development Finance</a></li>
    <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://localhost/commercialexpert.co.uk/finance/residential-investment-finance/">Residential Investment Finance</a></li>
    <li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://localhost/commercialexpert.co.uk/finance/asset-finance/">Asset Finance</a></li>
    <li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163"><a href="http://localhost/commercialexpert.co.uk/finance/secured-loans/">Secured Loans</a></li>
    <li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158"><a href="http://localhost/commercialexpert.co.uk/finance/cashflow-finance/">Cashflow Finance</a></li>
    <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="http://localhost/commercialexpert.co.uk/finance/commercial-investment-finance/">Commercial Investment Finance</a></li>
</ul>
</li>
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-151"><a href="http://localhost/commercialexpert.co.uk/alternative-funding/">Alternative Funding</a>
<ul class="sub-menu">
    <li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://localhost/commercialexpert.co.uk/alternative-funding/crowd-funding/">Crowd Funding</a></li>
</ul>
</li>
<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-166"><a href="http://localhost/commercialexpert.co.uk/protection/">Protection</a>
<ul class="sub-menu">
    <li id="menu-item-169" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-169"><a href="http://localhost/commercialexpert.co.uk/protection/wills-estate-planning/">Wills &amp; Estate Planning</a></li>
    <li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/commercialexpert.co.uk/protection/business-protection/">Business Protection</a></li>
    <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="http://localhost/commercialexpert.co.uk/protection/personal-protection/">Personal Protection</a></li>
</ul>
</li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/commercialexpert.co.uk/news/">News</a></li>
<li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://localhost/commercialexpert.co.uk/resources/">Resources</a></li>
<li id="menu-item-154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="http://localhost/commercialexpert.co.uk/contact/">Contact</a></li>
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://localhost/commercialexpert.co.uk/apply-for-funding/">Apply</a></li>
</ul>

如您所见，有些菜单有一个“子菜单”，我想在其中进行切换。不知道该怎么做，所以非常感谢任何帮助，因为它也会帮助我进行 future 的元素。

干杯

Answer 1

试试这个:CSS文件

@media all and (max-width: 991px) {
    .menu-item > ul.sub-menu { display: none; }
    .menu-item-has-children:after {
        content: '+';
    }
}

使用 jquery 的 js 文件

$('.menu-item-has-children').click(function(e){
    $(this).find('.sub-menu').toggle();
})