当我打开一个菜单时，我想更改整个网站的类，为菜单添加填充。我在 wordpress 的 php 函数中尝试这样做，但它不会影响任何东西单击时。有任何想法吗？否则整个网站工作正常，如果我像上面的功能一样向下滚动，固定的 header 将添加到正文类中。
我自己的 javascript 片段:
if ($(' #primary-navigation' ).hasClass( 'site-navigation .primary-navigation .toggled-on' )) {
body.addClass( 'menu-padding' );
} else {
body.removeClass( 'menu-padding' );
}
javascript 中的主体变量
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;
}
正文部分:
<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 and (max-width: 750px) { ... 你的 css 定义对于这个屏幕尺寸 ... } ?
关于javascript - 在激活另一个类时添加一个类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26754096/