Question

我正在尝试在我的网站中构建一些jQuery功能，但我抓住了一个障碍。我需要将jQuery块样式菜单拆分为2＆amp;可能是3列vs将它们全部放在一列中。我会在这里发布尽可能多的内容。我敢肯定我错过了一些明显的东西。我将从我要离开的网站开始：

http://upsidestudio.com/web/splitcol/2/

现在我有了CSS：

.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}

我的html <head> :(我想我的错误就在这里：我是jQuery / Javascript的新手）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>My Site</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />

  <!-- !Stylesheets -->
  <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
  <!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->

  <!-- !jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>  
  <script>
   // execute your scripts when the DOM is ready. this is mostly a good habit
   $(function() {

   // initialize scrollable
   $("#browsable").scrollable({circular: true}).navigator().autoscroll({
   interval: 10000  
   }); 

   // initialize scrollable together with the autoscroll plugin
   var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });

   // perform JavaScript after the document is scriptable.
   $(function() {
   // setup ul.tabs to work as tabs for each div directly under div.panes
   $("ul.tabs").tabs("div.panes > div")
   });

   });

  <!-- !jQuery Split Navigation -->

   $(document).ready(function() {
        $('.tabs').each(function() {
              if($(this).is("ol")) { var ordered = true; }
              var colsize = Math.round($(this).find("li").size() / 2);
              $(this).find("li").each(function(i) {
                 if (i>=colsize) {
                        $(this).addClass('right_col');
                   }
              });
              if(ordered) {
                   $(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
              } else {
                   $(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
              }
         });
   });

  </script>
 </head>

最后......我的Html部分。

<!--THE TABS-->

   <hr width="575" size="4" noshade align="left">

     <ul class="tabs">
     <li><a href="#">What We Do</a></li>
     <li><a href="#">How It Works</a></li>
     <li><a href="#">FAQ</a></li>
     <li><a href="#">The Ajungo Team</a></li>
     <li><a href="#">Advertise</a></li>
     </ul>

   <hr width="575" size="4" noshade align="left"><br/><br/>

 <!--TAB PANES COME IN BELOW THIS-->

Answer 1

嗯，我能看到的最大问题是你的脚本块中间有一条HTML评论：

<!-- !jQuery Split Navigation -->

删除它，然后添加

.tabs {
    margin-bottom: 20px;
}

您可以看到ul.tabs列表已分为两部分。但是，脚本中存在一些效率低下的问题。它可以像这样更加干净地重写：

$('.tabs').each(function() {
    var t = $(this),               // Store a copy of both $(this) and t.children(), 
        children = t.children(),   // to avoid calling the jQuery function too much
        // Create a clone of the original list, then empty it and insert it after the original
        secondList = t.clone(false).empty().insertAfter(this), 
        // Calculate the number of elements to move to the second list
        // ie. half the number of elements in the list, divided by two and rounded up
        length = Math.ceil(children.length / 2);

    // Move half the children of the original list to the new one
    children.slice(length).appendTo(secondList);

    // If the list is an ordered list, let the list start at the correct position 
    if(this.nodeName === 'OL'){
        secondList.attr('start', length + 1);
    }
});

请参阅：http://www.jsfiddle.net/yijiang/Tf4HT/1/

拆分列表的jQuery函数

1 个答案: