jquery - 为什么我的 jQuery .css() 代码没有应用样式？

Question

我查看了多个现有帖子，但没有一个能为我提供解决方案。

编辑:有人问我为什么要使用 jQuery(document).ready(function($)。这是一个 Wordpress 网站。 如果你想使用 $，你必须像这样包装你的 jQuery，因为 $ 被 Wordpress 框架使用并且会破坏你的代码。

更新

这是动态创建按钮的代码。我不会这样做，但当我开始在这里工作时，我继承了这个网站:

$('nav').before('<button class="menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); 
        $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>'); 

不仅样式没有被应用，它们在开发工具中甚至不可见所以我知道它们不仅仅是被内联样式或其他东西覆盖。根本没有加载 jQuery CSS。

详情:

• 控制台日志中没有错误。
• 运行 JS 提示时没有错误
• Chrome 调试器显示执行的代码
• Chrome 元素选项卡不显示已加载的样式
• .site-title 的样式完美应用
• .menu-btn 根本不适用。

jQuery(document).ready(function($) {

  $('.site-title').css({
    'grid-column-start': '2',
    'grid-column-end': '6'
  });

  $('.menu-btn').css({
    'top': 'unset',
    'right': 'unset',
    'left': '10px',
    'bottom': '15px',
    'z-index': '100',
    'position': 'fixed'
  });
});

当通过 CSS 添加相同的样式时，它们会正确应用。

body > div.site-container > button.menu-btn {
  top: unset;
  right: unset;
  bottom: 15px;
  left: 10px;
  z-index: 100;
  position: fixed;
}

Answer 1

@MDrX 想通了。我的 .menu-btn 是动态创建的，所以将我的代码添加到创建按钮的同一个 block 中，它起作用了!

最终结果:

    // Add Mobile Menu Button
    $('nav').before('<button class=".menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); // Add toggles to menus
    $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>');
    $('.menu-btn').css ({
        'top':'unset',
        'right':'unset',
        'left':'10px',
        'bottom':'15px',
        'z-index':'100',
        'position':'fixed'
    });

我现在在这里发布答案，但我在等着看@MDrX 是否会发布答案，这样我就可以称赞他和那个可爱的代表 :)