显示隐藏Div菜单响应

时间：2017-11-21 21:09:07

标签： javascript jquery wordpress

我在使用show / hide 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/

谢谢。

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

1 个答案:

答案 0 :(得分：0)

你想给我html看看更好的全景

所以我看到这些发生在id 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的）;

相关问题
最新问题