在激活另一个类时添加一个类答案

【问题标题】：adding a class when another is activated在激活另一个类时添加一个类
【发布时间】：2015-01-01 11:04:57
【问题描述】：

当我打开一个菜单时，我想更改整个网站的类以为菜单添加填充。我在 wordpress 的函数 php 中尝试这样做，但它不会影响任何东西点击时。有任何想法吗？否则整个站点工作正常，如果我像上面的函数那样向下滚动，则将固定的刊头添加到正文类中。

我自己的javascript sn-p：

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

javascript中的body变量

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

sn-p 代替窗口宽度函数：

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' );
    }
}

我在 wordpress 中的标头修复过程中添加了我的 javascript，因为此功能仅在屏幕分辨率高于 781 像素时才有效。

为菜单添加填充的css

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

主体部分：

<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 id="main" class="site-main">content<div/>

【问题讨论】：

body 到底是什么？它是一个 jQuery 对象吗？
body 函数只是调用 html 中的 body 标签。添加功能代码澄清

标签： javascript jquery css wordpress class

【解决方案1】：

我不是直接回答这个问题，而是根据窗口大小添加/更改一个类，为什么不使用 css 3：@media all and (max-width: 750px) { ... 你的 css 定义对于这个屏幕尺寸... } ?

【讨论】：

我有屏幕大小的 css 值，这是一个基于按钮切换添加类的脚本，仅在特定大小的窗口框架。低于 780 的功能无关紧要。

【解决方案2】：

在您的“自己的 javascript sn-p”代码中，您是如何执行此代码的？因为如果您不在按钮 div 上放置侦听器，它只会执行一次（如 *.onclick()）

【讨论】：