如何使用jQuery Accordian動態地移動標籤位置？

Question

在Accordion jQuery功能中，如何在不使用UI插件的情況下使用左側，右側，頂部和底部動態切換標籤位置？

例子：有一個下拉具有四個值這些1.top 2.bottom 3.left和4.right

If i click on top - Tabs should display top to bottom direction 
If i click on bottom - Tabs should display bottom to top direction 
If i click on left - Tabs should display left to right direction 
If i click on left - Tabs should display right to left direction 

Answer 1

你可以試試下面的代碼。請注意，此代碼不完整。您需要添加所有案例...

$("select").change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 

    switch (str) { 
    case 'top': 
     $("#tabs").addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
     break; 

    case 'bottom': 
     // fix the classes 
     $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") 
      .removeClass("ui-corner-all ui-corner-top") 
      .addClass("ui-corner-bottom"); 

     // move the nav to the bottom 
     $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); 
     break; 

    case 'left': 
     // change the required classes 
     break; 

    case 'right': 
     // change the required classes 
     break; 
    } 
});