在激活一个类时添加另一个类
在激活一个类时添加另一个类
提问于 2014-11-05 17:55:19
当我有一个菜单切换到开，我想改变整个网站的类，为菜单添加填充。我正在wordpress的函数php中尝试这样做，但是当它被点击时，它不会产生任何影响。有什么想法吗？另外，如果我像上面的函数一样向下滚动，那么整个站点都可以正常工作，固定的masthead就会添加到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' );
}
}我将我的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>site-main div：
<div id="main" class="site-main">content<div/>回答 2
Stack Overflow用户
发布于 2014-11-05 19:46:18
我没有直接回答这个问题，但是要根据窗口大小添加/更改一个类，为什么不使用css 3：@media all和(max-width: 750px) { ...您对此屏幕尺寸的css定义... }？
Stack Overflow用户
发布于 2014-11-07 16:43:35
在你的“自己的javascript代码片段”中，你是如何执行这段代码的？因为如果不在按钮div上放置侦听器(如*.onclick())，它只执行一次
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26754096
复制相关文章
相似问题
腾讯云开发者
