0

偉大な Google と SO は、これに関する検索結果を表示しませんでした。いくつかは似ていましたが、私をそこに連れて行きませんでした。

サブリスト項目の数に基づいて最小幅プロパティを設定するために<li>、サブ内の各個人にスタイル属性をアタッチするクラスレス サブメニューを作成する必要があります。<ul>

HTML

<nav>
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT COMPANY</a></li>
  <li>
    <a href="#" class="sub">ABOUT PRODUCT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li><a href="#">GETTING STARTED</a></li>
  <li>
    <a href="#" class="sub">PATIENT SUPPORT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">eUPDATES</a></li>
</ul>
</nav>

JavaScript

$('.sub').text(function() {
    var count = $(this).next().find('li').length;
    var totalwidth = count * 115;
    $(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});

クラス「サブ」に基づいて検索せずにこれを実行できる必要があります。何度か試してみましたが、現在使用しているコードほど強力なものはありません。私が一緒に働いているバックエンド開発者は、すべてが<ul><li></li></ul>クラスのない単純な構造であることを要求しています。

誰かがこれについて正しい方向に私を向けるのを助けることができれば、私はあなたの時間と助けに大いに感謝します!

4

1 に答える 1

1

UL を含むすべての LI 項目を対象とし、それらの UL 内の LI の数を見つけ、幅を乗算します。

$('ul', 'li').css('min-width', function() {
    return ( $(this).find('li').length * 115 ) + 'px';
});
于 2013-04-30T21:10:35.347 に答える