0

OK、私はこのスクリプトを持っています...

    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 語のナビゲーション アイテム間に改行を追加します。ただし、サブナビに影響する場合と影響しない場合があります。サイトのどのページでも機能する場合と機能しない場合があります。ブラウザを更新すると、サブナビに影響する場合と影響しない場合があります。両方のバージョンのスクリーン ショットを確認してください。しかし、それは正しいバージョンよりもめちゃくちゃなバージョンに行きます。それに影響を与えているのは私のスクリプトの何かですか？または、サブナビに影響を与えないようにするために追加できるものはありますか

ここに画像の説明を入力

ここで役立つ場合は、nav アイテムの 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");

トピックから外れていますが、ID の使用法は効率的ではありません。クラスを参照する必要があります。ノードにデータを格納する必要がある場合は、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 に答える