function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) { 
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width(); 
});
};
})(jQuery); 
如题,这个是一个下拉菜单的脚本,它通过查找UL个数来给下拉列表赋予宽度,比如宽度是200如果是4个UL就会是800的宽度平行展示,但是我想把那个UL两个两个的放在div中垂直罗列,也就是需要400的宽度,但是上面的代码还是出现了800的宽度,(this).find("div")也没有达成我的效果,请问各位能不能帮我解答呢,小弟对这段代码不熟,只能知道大概,如何能根据我的div数量给他400的宽度呢?谢谢大家啦!!!

解决方案 »

  1.   

    这样?<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
            <title>Insert title here</title>
            <script src="jquery.js"></script>
            <style>
             ul{
             width: 200px;
             list-style: none;
             margin: 5px 0;
             }
             .ul-container{
             float: left;
             }
            </style>
        </head>
        <body>
         <div id="test">
         <ul>
         <li>11</li>
         <li>12</li>
         </ul>
         <ul>
         <li>21</li>
         <li>22</li>
         </ul>
         <ul>
         <li>31</li>
         <li>32</li>
         </ul>
         <ul>
         <li>41</li>
         <li>42</li>
         </ul>
         </div>
         <script>
         (function($) {  
    jQuery.fn.extend({
    calcSubWidth: function() {
    var elem = $(this), div = null, rowWidth = 0;
    //Calculate row
    elem.find("ul").each(function(i) {
    if(i%2 === 0){
    div = $('<div class=ul-container>').appendTo(elem);
    rowWidth = 0;
    }
    div.append(this);
    rowWidth += $(this).width();
    div.width(rowWidth);
    });

    }
    });
    })(jQuery);
    $('#test').calcSubWidth();
         </script>
        </body>
    </html>
      

  2.   

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html"; charset=utf-8">
            <title>Insert title here</title>
            <script src="jquery.js"></script>
            <style>
             ul{
             width: 200px;
             list-style: none;
             margin: 5px 0;
             }
             .ul-group{
             float: left;
             }
            </style>
        </head>
        <body>
         <div id="test">
         <ul>
         <li>11</li>
         <li>12</li>
         </ul>
         <ul>
         <li>21</li>
         <li>22</li>
         </ul>
         <ul>
         <li>31</li>
         <li>32</li>
         </ul>
         <ul>
         <li>41</li>
         <li>42</li>
         </ul>
         </div>
         <script>
         (function($) {  
    jQuery.fn.extend({
    calcSubWidth: function() {
    var elem = $(this), div = null, rowWidth = 0;
    //Calculate row
    elem.find("ul").each(function(i) {
    if(i%2 === 0){
    div = $('<div class=ul-group>').appendTo(elem);
    rowWidth = 0;
    }
    div.append(this);
    });

    }
    });
    })(jQuery);
    $('#test').calcSubWidth();
         </script>
        </body>
    </html>
      

  3.   

    不是双数也没问题啊,只是最后一个div里面只有一个ul而已