Question

尝试构建移动响应式菜单。有些项目有一个＆＃34;子菜单＆＃34;在li下面（网站是在Wordpress中构建的）

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

我的菜单标记如下：

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

正如你所看到的那些有一个＆＃34;子菜单＆＃34;这就是我想要切换的地方。不知道如何做到这一点，所以任何帮助都非常感激，因为它也将帮助我未来的项目。

干杯

Answer 1

试试这个： css文件

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

js文件与jquery

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

移动响应菜单 - 如果出现子菜单（显示链接）

1 个答案: