显示隐藏 Div 菜单响应

Question

我在使用显示/隐藏 div 时遇到问题，它在桌面视图上运行良好。

jQuery.noConflict();
(function( $ ) {
    $(function() {
            // Optional code to hide all divs
            $("#section-intro").show();
            $("#section-about-us").hide();
            $("#section-what-we-do").hide();
            $("#section-oil-gas").hide();
            $("#section-infrastructure").hide();
            $("#section-mining").hide();
            $("#section-constructions").hide();
            $("#section-logistics").hide();
            $("#section-main-services").hide();
            $("#section-business-approach").hide();
            $("#section-resources").hide();
            $("#section-contact-us").hide();
            // Show chosen section from menu, and hide all others sections
            $('.hidecontent').click(function(){
                jQuery('.showHideDiv').hide();
                var id = $(this).attr("href");
                $(id).show();
            });
            // Show chosen section from intro, and hide all others sections
            $('.footerlinks a').click(function(){
                jQuery('.showHideDiv').hide();
                var id = $(this).attr("href");
                $(id).show();
            });
   });
})(jQuery);

我在 Wordpress 菜单 ".hidecontent" 中添加了一个类，它获取 href url "#somediv" 并显示它并隐藏上一部分。效果很好。

问题是当它进入平板电脑/移动设备视图时，它不再工作了。

我的逻辑是，当您必须按下按钮并显示下拉菜单时，它与响应式移动视图有关，但我无法弄清楚。我已经尝试了所有课程，但没有任何效果，无论如何它应该可以工作。

有人知道吗？在过去的几个小时里，我一直在努力让它发挥作用。

你可以在这里看到它：http://euro.greekmedia.ro/

谢谢。

//编辑 HTML

<div id="et-top-navigation" data-height="65" data-fixed-height="40" style="padding-left: 238px;">
<nav id="top-menu-nav">
    <ul id="top-menu" class="nav">
        <li id="menu-item-46532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46532"><a class="hidecontent" href="#section-about-us">About us</a>
        </li>
        <li id="menu-item-46533" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46533"><a class="hidecontent" href="#section-what-we-do">What we do</a>
        </li>
        <li id="menu-item-46534" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46534"><a href="#">Industries</a>
            <ul class="sub-menu">
                <li id="menu-item-46535" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46535"><a class="hidecontent" href="#section-oil-gas">Oil &amp; Gas</a>
                </li>
                <li id="menu-item-46536" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46536"><a class="hidecontent" href="#section-infrastructure">Infrastructure</a>
                </li>
                <li id="menu-item-46537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46537"><a class="hidecontent" href="#section-mining">Mining</a>
                </li>
                <li id="menu-item-46604" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46604"><a class="hidecontent" href="#section-constructions">Constructions</a>
                </li>
                <li id="menu-item-46603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46603"><a class="hidecontent" href="#section-logistics">Logistics</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-46538" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46538"><a class="hidecontent" href="#section-main-services">Main services</a>
        </li>
        <li id="menu-item-46539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46539"><a class="hidecontent" href="#section-business-approach">Business approach</a>
        </li>
        <li id="menu-item-46541" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46541"><a class="hidecontent" href="#section-resources">Resources</a>
        </li>
        <li id="menu-item-46542" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46542"><a class="hidecontent" href="#section-contact-us">Contact</a>
        </li>
    </ul>
</nav>




<div id="et_mobile_nav_menu">
    <div class="mobile_nav closed">
        <span class="select_page">Select Page</span>
        <span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
        <ul id="mobile_menu" class="et_mobile_menu">
            <li id="menu-item-46532" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46532 et_first_mobile_item"><a class="hidecontent" href="#section-about-us">About us</a>
            </li>
            <li id="menu-item-46533" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46533"><a class="hidecontent" href="#section-what-we-do">What we do</a>
            </li>
            <li id="menu-item-46534" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46534"><a href="#">Industries</a>
                <ul class="sub-menu">
                    <li id="menu-item-46535" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46535"><a class="hidecontent" href="#section-oil-gas">Oil &amp; Gas</a>
                    </li>
                    <li id="menu-item-46536" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46536"><a class="hidecontent" href="#section-infrastructure">Infrastructure</a>
                    </li>
                    <li id="menu-item-46537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46537"><a class="hidecontent" href="#section-mining">Mining</a>
                    </li>
                    <li id="menu-item-46604" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46604"><a class="hidecontent" href="#section-constructions">Constructions</a>
                    </li>
                    <li id="menu-item-46603" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46603"><a class="hidecontent" href="#section-logistics">Logistics</a>
                    </li>
                </ul>
            </li>
            <li id="menu-item-46538" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46538"><a class="hidecontent" href="#section-main-services">Main services</a>
            </li>
            <li id="menu-item-46539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46539"><a class="hidecontent" href="#section-business-approach">Business approach</a>
            </li>
            <li id="menu-item-46541" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46541"><a class="hidecontent" href="#section-resources">Resources</a>
            </li>
            <li id="menu-item-46542" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46542"><a class="hidecontent" href="#section-contact-us">Contact</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

您是否愿意给我 html 以更好地查看全景图

所以我看到这些发生在 id the href 但你需要 # 以便 jquery 识别它

类似的东西

jQuery.noConflict();
(function( $ ) {
 $(function() {
        // Optional code to hide all divs
        $("#section-intro").show();
        $("#section-about-us").hide();
        $("#section-what-we-do").hide();
        $("#section-oil-gas").hide();
        $("#section-infrastructure").hide();
        $("#section-mining").hide();
        $("#section-constructions").hide();
        $("#section-logistics").hide();
        $("#section-main-services").hide();
        $("#section-business-approach").hide();
        $("#section-resources").hide();
        $("#section-contact-us").hide();
        // Show chosen section from menu, and hide all others sections
        $('.hidecontent').click(function(){
            jQuery('.showHideDiv').hide();
            var id = $(this).attr("href");
            $('#'+id).show();
        });
        // Show chosen section from intro, and hide all others sections
        $('.footerlinks a').click(function(){
            jQuery('.showHideDiv').hide();
            var id = $(this).attr("href");
            $('#'+id).show();
        });

}); })(jQuery);