jQuery切换功能不起作用

Question

Can someone tell me why this isn't working? 有人可以告诉我为什么这不起作用吗？

HTML 的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 的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 JS

$(document).ready(function() {

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

I want the #overlay-2 to be hidden when the page loads and then toggle show/hide when I use the menu button with a custom class assigned in wordpress nav menu "css classes" metabox. 我希望在页面加载时隐藏＃overlay-2，然后在菜单按钮与在wordpress导航菜单“ css类” metabox中分配的自定义类一起使用菜单按钮时切换显示/隐藏。 .my_custom_class is what I assigned it. .my_custom_class是我分配的。

Why isn't this working? 为什么这不起作用？ If you could supply the corrected code that would be great :) 如果您可以提供更正的代码，那将是很好的:)

Thanks! 谢谢！

Answer 1

Simply cause you don't have any .my_custom_class in your HTML 只是因为您的HTML中没有任何.my_custom_class

If you add a 如果您添加一个

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

both in your document and inside the overlay you're good to go: 无论是在文档中还是在叠加层中，都可以使用：

LIVE EXAMPLE 现场例子

jQuery切换功能不起作用

问题描述

1 个解决方案

解决方案1
0 2014-01-28 01:04:21

jQuery切换功能不起作用

问题描述

1 个解决方案

解决方案1 0 2014-01-28 01:04:21

解决方案1
0 2014-01-28 01:04:21