0

ここで解決策を見つけたり見つけたりすることができないので、質問することにしました。私はプレーンな css/html ドロップダウン メニュー コードを持っています。これは動作し、問題なく見えますが、jquery を追加すると問題が発生します。以下の例でわかるように、同じツリー (ul.children li) 要素の幅の最大値を、このツリー内のすべての要素の幅として追加しようとしています。さて、属性が追加されましたが、 .childrenをすべてulに変更して要素範囲をグローバル化しようとしても、値は 0px のままです。要素の必要な最大幅の値ではなく、コードが 0px を出力するようにしているのは何ですか。前もって感謝します！

プレーンな HTML コードは次のとおりです。

<ul>

   <li class="page_item page-item-2"><a href="">Sākumlapa</a></li>

   <li class="page_item page-item-4"><a href="">Par mums</a>

      <ul class="children">

        <li class="page_item page-item-6"><a href="">Galerija</a></li>

      </ul>

   </li>

</ul>

そして、ここにjQueryコードがあります：

                       $(document).ready(function() {

                            var maxWidth = 0;

                            var elemWidth = 0;


                            $('.children li').each(function() {

                                elemWidth = parseInt($(this).css('width'));

                                if (parseInt($(this).css('width')) > maxWidth) {

                                    maxWidth = elemWidth;

                                }

                             });


                            $('.children li').each(function() {

                                  $(this).css('width', maxWidth + "px");

                            });

                       });

これを実行すると、children.li 要素に style 属性が追加されていることがわかりますが、要素の最大幅ではない 0px が含まれています。これはブラウザからのコピー＆ペーストコードです。

<ul>

   <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">Sākumlapa</a></li>

   <li class="page_item page-item-4"><a href="http://localhost/wordpress/?page_id=4">Par mums</a>

      <ul class="children">

        <li class="page_item page-item-6" style="width: 0px;"><a href="http://localhost/wordpress/?page_id=6">Galerija</a></li>

      </ul>

   </li>

</ul>
4

4 に答える 4

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

                            var maxWidth = 0;

                            var elemWidth = 0;

                            $('.children li').each(function() {

                                elemWidth = parseInt($(this).outerwidth());

                                if (elemWidth  > maxWidth) {

                                    maxWidth = elemWidth;

                                }

                            });

                            $('.children li').each(function() {

                                $(this).css('width', maxWidth + 'px');

                            });

                        });

これがデモですhttp://jsfiddle.net/n4CQv/2/

于 2012-06-21T22:50:39.783 に答える
1

.outerWidth()css によって設定された値ではなく、計算された幅を取得します。次のように使用してみることをお勧めします。

var maxWidth = 0;
var elemWidth = 0;


$('.children li').each(function() { 
    elemWidth = $(this).outerWidth();
    if (parseInt($(this).css('width')) > maxWidth) {
        maxWidth = elemWidth;
    }
});
于 2012-06-21T22:45:19.413 に答える
1

とても近い！これがドロップダウンの場合display: none、CSS でドロップダウンがデフォルトで設定されており、親がホバーされたときに表示されますか? その場合、要素の表示プロパティが none の場合、要素には寸法がありません。使用visibility: hiddenして非表示にdisplay: blockし、デフォルトの CSS で設定する必要があります。つまり、要素は表示されませんが、スペースを占有します。javasacript は問題ありませんが、jquery の.width()メソッドを使用して少し整理できます。さらに、2 番目の$.eachメソッドは不要です。

$(document).ready(function() {

  var maxWidth = 0;
  var elemWidth = 0;

  $('.children li').each(function() {
    elemWidth = $(this).width();
    if (elemWidth) > maxWidth) {
      maxWidth = elemWidth;
    }
  });

  $('.children li').width( maxWidth );

});
于 2012-06-21T22:54:45.920 に答える
0

ドキュメントがロードされた後、各関数の前に次の行を追加しました。

    $('.navigation li').hover(function(){
       // here goes the whole code above
    });

これで問題が解決しました！

于 2012-06-21T23:21:26.300 に答える