Question

logo元素将WordPress顶部导航菜单推到右边太多了。我要做的是在页面加载时获得徽标的宽度，并在菜单中添加一个负的左边距，设置为徽标宽度的一半。我成功地做到了以下几点：

jQuery(document).ready(function($){
    var logoWidth = $('img#logo').width();
    var logoWidthMargin = logoWidth / 2;
        $('nav#top-menu-nav').css("margin-left", - logoWidthMargin);

});

这是HTML：

<body class="some-class1 some-class2 some-class3">
   <div id="page-container">
      <header id="main-header">
         <div class="container">
            <div class="logo_container">
               <img src="logo.png" id="logo"/>
            </div>
            <div id="top-navigation">
               <nav id="top-menu-nav">
                  <ul id="top-menu" class="nav">
                     <li id="menu-item">Menu Item</li>
                     <li id="menu-item">Menu Item</li>
                     <li id="menu-item">Menu Item</li>
                  </ul>
               </nav>
            </div>
         </div>
      </header>
   </div>
</body>

现在的事情是，我希望能够在特定页面上禁用此功能。 body标签具有多个类，因此我想以某种方式使它，以便在body标签具有特定类的页面上，此脚本将不会运行。

例如-我希望脚本像现在一样继续在所有页面上运行-但是一旦存在其中body标记具有“ some-class2”（除了其他类）的页面，脚本就赢了没跑我该怎么办？

还-额外的问题-我对js和jquery还是很陌生，并通过反复试验在上面编写了该代码，直到它起作用为止，但是有没有更有效的方法来实现这一目标？我的意思是，整个定义一个变量以获取徽标的宽度，然后定义另一个变量以获取该宽度的一半似乎有点多余，我敢肯定，有一种更短的方法我不知道。。？

Answer 1

现在的事情是，我希望能够在特定页面上禁用此功能。 body标签具有多个类，我想以某种方式使其成为body标签具有特定类的页面，该脚本将不会运行。

检查课程：

if (!$("body").hasClass("the-class")) {
    // run the script
}

就地：

jQuery(document).ready(function($){
    if (!$("body").hasClass("the-class")) {
        var logoWidth = $('img#logo').width();
        var logoWidthMargin = logoWidth / 2;
        $('nav#top-menu-nav').css("margin-left", - logoWidthMargin);
    }
});

如果徽标具有已知的宽度（如果您查看它的CSS，宽度可能也是如此），则也可以仅使用CSS：

body:not(.the-class) #top-menu-nav {
    margin-left: -32px; /* Assuming the logo is 64px wide */
}

仅在特定主体类上使用jQuery应用CSS

1 个答案: