当另一个被激活时添加一个类

当我有一个菜单切换到，我想改变整个网站的主体类，以添加填充菜单..我试图在wordpress的函数的PHP但点击时不会影响任何内容。有任何想法吗？整个网站工作正常否则，如果我向下滚动，如上面的函数，固定的标头被添加到主体类。当另一个被激活时添加一个类

我自己的JavaScript代码段：在JavaScript

if ($(' #primary-navigation').hasClass('site-navigation .primary-navigation .toggled-on')) { 
    body.addClass('menu-padding'); 
} else { 
    body.removeClass('menu-padding'); 
}

体变量

function($) { 
    var body = $('body'), 
     _window = $(window);

片断到位窗口宽度功能：

if (_window.width() > 781) { 
    var mastheadHeight = $('#masthead').height(), 
     toolbarOffset, mastheadOffset; 

    if (mastheadHeight > 48) { 
     body.removeClass('masthead-fixed'); 
    } 

    if (body.is('.header-image')) { 
     toolbarOffset = body.is('.admin-bar') ? $('#wpadminbar').height() : 0; 
     mastheadOffset = $('#masthead').offset().top - toolbarOffset; 

     _window.on('scroll.twentyfourteen', function() { 
      if (_window.scrollTop() > mastheadOffset && mastheadHeight < 49) { 
       body.addClass('masthead-fixed'); 
      } else { 
       body.removeClass('masthead-fixed'); 
      } 
     }); 
    } 

    if ($(' #primary-navigation').hasClass('site-navigation .primary-navigation .toggled-on')) { 
     body.addClass('menu-padding'); 
    } else { 
     body.removeClass('menu-padding'); 
    } 
}

IM加入我的javascript在中间WordPress的固定头文件，因为这个功能只适用于屏幕分辨率高于781像素。

CSS用于待添加的菜单的填补

.menu-padding .site-main { 
    margin-top: 48px; 
}

体DIV：

<body <?php body_class(); ?>>

导航菜单：点击时

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> 
    <button class="menu-toggle">Menu function</button> 
</nav>

导航类：

<nav id="primary-navigation" class="site-navigation primary-navigation toggled-on" role="navigation"> 
    <button class="menu-toggle">Menu function</button> 
</nav>

站点主要DIV：

<div id="main" class="site-main">content<div/>

来源

2014-11-05 antonanton

“body”究竟是什么？它是一个jQuery对象吗？ – 2014-11-05 09:58:00

正文函数只是调用html中的body标签。添加功能代码，以澄清 – antonanton 2014-11-05 10:36:46

我不回答这个问题，但直接添加/取决于窗口的大小改变一个类，为什么不使用CSS 3：@media所有和（最大宽度：750px）{...您的CSS定义这个屏幕大小...}？

来源

2014-11-05 11:46:17 tordo256

我有CSS的屏幕尺寸值，这是一个脚本，添加一个类的基础上按钮的切换，只有在一定的大小窗口框架。功能不低于780。 – antonanton 2014-11-05 16:18:05

在你的“自己的javascript代码片段”代码中，你是如何执行这个代码的？因为它只执行一次，如果你不把一个监听器放在你的按钮div上（比如* .onclick（））

来源

2014-11-07 08:43:35 tordo256

当另一个被激活时添加一个类

回答

相关问题