Question

有人可以告诉我为什么这不起作用吗？

HTML

<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
        <div id="wrap_all">
            <header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
                <div id="header_meta" class="container_wrap container_wrap_meta">
                <div id="header_main" class="container_wrap container_wrap_logo">
                <div id="header_main_alternate" class="container_wrap">
                    <div class="container">
                        <nav class="main_menu" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" data-selectname="Select a page">
                           <div id="megaMenu-sticky-wrapper">
                             <div id="megaMenu" class="megaMenuContainer megaMenuHorizontal wpmega-preset-vanilla megaResponsive megaResponsiveToggle wpmega-withjs megaMenuOnClick megaFullWidth wpmega-noconflict megaMinimizeResiduals themeloc-avia megaMenu-withjs">
                                <div id="megaMenuToggle" class="megaMenuToggle">
                                <ul id="megaUber" class="megaMenu">
                                    <li id="menu-item-8" class="jrm-um-sticky-only menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home ss-nav-menu-item-0 ss-nav-menu-item-depth-0 ss-nav-menu-reg um-flyout-align-center ss-nav-menu-with-img ss-nav-menu-notext">
                                    <li id="menu-item-1459" class="my_custom_class menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children mega-with-sub ss-nav-menu-item-1 ss-nav-menu-item-depth-0 ss-nav-menu-mega ss-nav-menu-mega-fullWidth mega-colgroup mega-colgroup-6 ss-nav-menu-mega-alignCenter">
                                        <a href="#">

CSS

#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;  
z-index: 10;
display: none;
}

JS

$(document).ready(function() {

    $('.my_custom_class').click(function()    {
       $('#overlay-2').toggle();
    });
});

我希望在页面加载时隐藏＃overlay-2，然后在我使用菜单按钮时使用在wordpress导航菜单“css classes”元文件中分配的自定义类来切换显示/隐藏。 .my_custom_class是我指定的。

为什么这不起作用？如果您能提供更好的更正代码：）

谢谢！

Answer 1

只是因为HTML中没有.my_custom_class

如果添加

<button class="my_custom_class">Toggle Overlay</button>

无论是在您的文档中还是在叠加层中，您都可以去：

<强> LIVE EXAMPLE

Jquery切换功能不起作用

1 个答案: