javascript - jQuery 条件头类交换

标签 javascript css wordpress class

希望有人能帮助我,因为我不太了解 js 并且想在 WP 站点上构建现有功能...

我有两个版本的网站标题。在主页上加载 alt(透明背景)版本,滚动后,它切换到全站非 alt(白色背景)版本。

我想添加一个条件,当菜单按钮被“切换”(class="main-navigation toggled")时,标题也会交换到非 alt 版本。

这是现有的功能。提前致谢。

jQuery(document).ready(function ($) {
    console.log('ready');
      var header = $(".site-header");
      if( $("body.home").length ) {
        header.addClass("site-header-alt");
      }
        
      $(window).scroll(function() {    
          var scroll = $(window).scrollTop();
          
          if( $("body.home").length ) {
            if (scroll <= 100) {
                header.addClass("site-header-alt");
            } else {
                header.removeClass("site-header-alt");
            }
          }
      });
  });

最佳答案

简单地说:

$(document).ready(function () {

    // check if .main-navigation contains toggled class
    if ( $(".main-navigation").hasClass("toggled") )
    {
        header.addClass("site-header-alt");
    }

    // Also listen to the click event of the element that does the toggling.
    $(".menu-toggle").click( function () {
        if ( $(".main-navigation").hasClass("toggled") )
        {
            header.addClass("site-header-alt");
        }
    });

    // other stuffs
});

希望对你有帮助

关于javascript - jQuery 条件头类交换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46009246/

相关文章:

php - 在不引起数据问题的情况下可视化 chop 文本

javascript - 防止点击 anchor 内 DOM 生成的元素时的 anchor 行为

php - 通过插件和变量在前端添加css

javascript - 通过 ajax 嵌入 Facebook 视频

javascript - 通过javascript附加样式表而不闪烁

javascript - 在没有服务器的情况下从java脚本调用perl

php - 如果输入为空,如何用 PHP 显示其他内容?

Javascript解释以下语法

javascript - CSS 动画 : changing images in an infinite loop

css { content : "text"}, 如何添加标签?