0

好的，所以我有这个脚本...

    jQuery(document).ready(function(){
      var tabs = ["tab7", "tab9", "tab10", "tab11", "tab17", "tab25"];
      jQuery.each(tabs, function(index, value){
        var el = $("#"+value+" a");
        var html = el.html().split(" ");
        html = html[0] + "<br>" + html.slice(1).join(" ");
        el.html(html);
        el.css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
      });
    });

它在 2 个单词的导航项之间添加了一个换行符。但有时它会影响子导航，有时则不会。它可以在网站的任何页面上工作或不工作。刷新浏览器后，它可能会或可能不会影响子导航。查看两个版本的屏幕截图。但它比正确的版本更多地出现在混乱的版本中。我的脚本中的某些东西会影响它吗？或者我可以添加一些东西以使其不影响子导航

在此处输入图像描述

如果它在这里有帮助，那就是导航项目的 LI 的 HTML。

<li id="tab7" class="hasChildren">
    <a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
    <ul class="submenu">
        <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
        <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    </ul>
</li>
4

1 回答 1

0

这与它的工作方式相同，children并且可能更快：

var el = $("#"+value+" > a");

或者

var el = $("#"+value).find("> a");

题外话，但是您对 ids 的使用效率不高，您应该引用一个类，然后如果您需要使用节点存储数据，请使用 hml5 数据属性：

<li data-tabid="7" class="tab hasChildren">
<a href="/s.nl/c.1334893/sc.7/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a>
<ul class="submenu">
    <li><a href="/s.nl/c.1334893/sc.7/category.86/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
    <li><a href="/s.nl/c.1334893/sc.7/category.87/.f" style="line-height: 19px; text-align: center; padding-top: 20px; height: 58px;">Featured<br>Items</a></li>
</ul>
</li>

js

jQuery(function($,undefined){
  var $tabs =$(".tab");
  $tabs.each(function(){
    var $el = $(this).find(">a");
    var html = $el.html().split(" ");
    $el.html(html[0] + "<br>" + html.slice(1).join(" "))
       .css({"line-height" : "19px","text-align" : "center","padding-top" : "20px","height" : "58px"});
  });
});

最后将 css 行移动到类中的 css 文件

 .twolines {line-height: 19px; //...

然后代替.css(... .hadClass("twolines")

迈向整洁代码和优雅的第一步...... g'luck

于 2013-10-19T06:42:55.490 回答