0

前（伪代码）：

<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
      </ul>
    </div>
  </li>
</ul>


<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
      </ul>
    </div>
  </li>
</ul>

目标是这样的：

Item 1 | Item 6
Item 2 | Item 7
Item 3 | Item 8
Item 4 | Item 9
Item 5 | Item 10

或者

Item 1 | Item 7
Item 2 | Item 8
Item 3 | Item 9
Item 4 | Item 10
Item 5 | Item 11
Item 6

问题：我想获取最大宽度，column1然后column2添加结果并设置为宽度main-wrapper：totalWidth = column1 + column2 $('.main-wrapper').css('width', totalWidth);

我的实现：

var $listing = $(this).find('ul.menu .extended ul li'); 
var $col1, $col2;
// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);
   if(key == 0) {
   // Get the width of the first column
     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
     $col2 = $t.outerWidth(true);
    }
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46;  
// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);

但是如果文本没有空格，我的脚本只会正确获取宽度。

4

3 回答 3

2

这是非常奇怪的代码，您应该研究更好的方法来做到这一点。同时，我将您的代码放在 JSFiddle 中，并且您的 $total_width 将返回为 NaN - 您应该设置初始 $col1 和 $col2 = 0 - 这至少可以确保您获得一个可以使用的数值。

编辑：亚历山大是正确的 - $().find() 确实返回一个 jQuery 对象。在我的测试中，我删除了这个并做了 $.find() 并且没有 .each() 函数。

var $listing = $(this).find('ul.menu .extended ul li'); 
console.log($listing);

var $col1 = 0, $col2 = 0;

// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);

   if(key == 0) {
   // Get the width of the first column

     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
 $col2 = $t.outerWidth(true);
}
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46; 

// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);

我认为这会奏效。

于 2012-09-21T03:51:43.140 回答
1

我建议您让 CSS 确定每个“列”的宽度并将这些值加在一起。

因为 .column1 和 .column2 是列表元素 ( display: list-item;)，所以它们将始终具有相同的宽度，因为它们将扩展以适应最大的子项。

见：http: //jsfiddle.net/cWsxZ/1/

将它们设置为display: inline-block;，其余的应该很容易。

见：http: //jsfiddle.net/uYW8B/1/

/* css */
li.expanded { display: inline-block; }​

/* js */
var totalWidth = $('.column1').width() + $('.column2').width();
$('.main-wrapper').width(totalWidth);​
于 2012-09-21T04:48:04.853 回答
0

这是我对我的问题的解决方案。感谢大家的投入。

(function ($) {

  Drupal.behaviors.menu = {
    attach: function (context, settings) {


      /** SOF Block: Populate the menu items to each columns **/
      var $lists = $('#navigation li.expanded ul.menu'); 

      // Loop through all target lists.
      $lists.each(function(i, e) {

        var $list = $(e);
        // Count all the items
        var $count_list = $(this).find('li').size();
        // Get the ceiling for first column
        var $sliced_list = Math.ceil($count_list / 2);

        if($count_list > 5) {

          //These are temporary variables.
          var $new_list = $('<ul>');
          var $list_item, $sub_list, $sub_set;

          // Set the number of items per column when less than 9
          if($count_list < 9) {
            // The number of items per column.
            var per_column = 5;
          } 

          // Dynamic number of items per column when more that or equal to 9
          if($count_list >= 9) {
            var per_column = $sliced_list;
          }

          // Calculate the amount of columns needed.
          var n = Math.ceil($list.find('li').length / per_column);

          // Loop through all columns.
          for (var i = 0; i < n; ++i) {

            // Creates the sub list for the current column.
            $sub_list = $('<ul class="columns column' + (i + 1) + '">');
            // Gets the first set of list items from the original list and adds them to the sub list created above.
            $sub_set = $list.find('li').slice(0, per_column).appendTo($sub_list);
            // Creates a new list item and adds the sub list to it.
            $list_item = $('<li class="extended extended' + (i + 1) + '">').append($sub_list);
            // Add the newly created list item to the new list.
            $new_list.append($list_item);
            // Create a div with the class 'columnX' and wrap the sub list with it.
            //$sub_list.wrap('<div class="columns column' + (i + 1) + '"></div>');

          }

          // Replace the original list with the new one.
          $list.html($new_list.html());

        }
      }); 
      /** EOF Block: Populate the menu items to each columns **/

      /** SOF Block: Apply all necessary changes to focused menu items **/
      // Set all settings required on hover
      $('#navigation ul li.expanded').hover(function() {
        $(this).children().next('ul').css('display', 'block');
        $(this).addClass('hover'); 
        // Get the width of parent li
        var w = $(this).width();
        // Apply the width to the "div class='fix'" element to avoid overlapping
        $(this).children().next('div').css('width', w + 'px');      
      }, function() {
        $(this).children().next('ul').css('display', 'none');
        $(this).removeClass('hover');
      });
      /** EOF Block: Remove all changes applied to all focused menu items on mouseouot **/    

    }
  };
})(jQuery);
于 2012-09-27T06:58:43.043 回答