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

adding a class when another is activated

本文关键字：一个 另一个 激活 添加      更新时间：2023-09-26

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

我自己的javascript片段：

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

窗口宽度函数的代码段：

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

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

我不是直接回答这个问题，但要根据窗口大小添加/更改类，为什么不使用css 3:@media-all和（最大宽度：750px）{…你对这个屏幕大小的css定义…}？

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

相关文章：