【问题标题】:jQuery conditional header class swapjQuery条件头类交换
【发布时间】:2018-02-11 01:12:42
【问题描述】:

希望有人可以帮助我,因为我并不真正了解 js,并且想在 WP 网站上的现有功能的基础上构建......

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

我想添加一个条件,当菜单按钮“切换”(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");
            }
          }
      });
  });

【问题讨论】:

    标签: javascript css wordpress class


    【解决方案1】:

    简单地说:

    $(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
    });
    

    希望对你有帮助

    【讨论】:

    • 谢谢。进行切换的元素是 .menu-toggle。我不确定在函数中的何处添加它。我在滚动功能之后添加了它,但它似乎不起作用。
    • 我更新了我的答案,你应该把它们放在你的$(document).ready函数中
    • 谢谢。我实际上需要删除该类,而不是添加它: header.removeClass("site-header-alt");
    • 很好,如果它解决了您的问题,请确保将其标记为答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-26
    • 2010-09-18
    • 2021-05-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多