在JQuery Tools選項卡中使用漸進式公開

呃男孩..我有一個客戶，希望每個鐘聲和口哨都在他們的頁面上。當然，我正在使用JQuery;原始的設計師已經爲我提供了各種定製的腳本，但是現在需求列表已經增加，並且我已經開始修改並添加到原始的平面HTML。在JQuery Tools選項卡中使用漸進式公開

設計者似乎已經使用了JQuery UI--但坦率地看着我認爲它已經結束的所有功能，因爲它們還爲Cycle，Hover，Chosen提供了定製腳本。我不喜歡Tabs功能，因爲我似乎無法使其適應客戶的新需求。所以我轉而使用JQUery Tools作爲我的標籤解決方案 - 這非常棒。

但是我試圖將漸進式披露放在我的標籤中 - 而且它們根本不起作用！我有一個定製的腳本;

//OnClick 
$('.sys_expandable li h3 a').click(function(){ 

    if($(this).parent().parent().hasClass('active')){ 
     $(this).parent().parent().removeClass('active').find('div.sys_section').slideUp(200);   
    } else { 
     $(this).parent().parent().addClass('active').find('div.sys_section').slideDown(200); 
    } 

});

而HTML;

<DIV class=PLACE id=PLACE1 title=tabs> 
<UL class=tabs> 
    <LI> 
     <A href="#tabone">General Information</A> 
    </LI> 
    <LI> 
     <A href="#tabtwo">Rentals</A> 
    </LI> 
    <LI> 
     <A href="#tabthree">Referrals</A> 
    </LI> 
</UL> 
</DIV> 
<DIV class=pane id=tabone> 
<DIV class=PLACE id=PLACE2 title=tabone > 
    <P> 
     <ul class="sys_expandable"> 
     <li class="sys_expandableContainer"> 
      <h3> 
      Health Partners 
      </h3> 
      <div class="sys_section"> 
      <p> 
       Health Partners will take steps... 
      </p> 
      </div> 
     </li> 
     </ul> 
     <ul class="sys_expandable"> 
     <li class="sys_expandableContainer"> 

      <h3> 
      East Wing external refurbishment 
      </h3> 
      <div class="sys_section"> 

      <p> 
       The East Wing has been a .... 
      </p> 
      </div> 
     </li> 
     </ul> 
    </P> 
</DIV> 
</DIV> 
<DIV class=pane id=tabtwo> 
<DIV class=PLACE id=PLACE3 title=tabtwo> 
    <P> 
     Tab two 
    </P> 
</DIV> 
</DIV> 
<DIV class=pane id=tabthree> 
<DIV class=PLACE id=PLACE4 title=tabthree > 
    <P> 
     Tab three 
    </P> 
</DIV> 
</DIV>

任何人都可以看到衝突嗎？我正在把頭髮拉出來！

在此先感謝任何有線索的人。

來源

2012-01-09 Alex

PS。相同的腳本可以在選項卡外正常工作。去搞清楚！ – Alex 2012-01-09 18:27:45

您的列表的h3部分沒有超鏈接（您選擇.sys_expandable li h3 a，但在您的示例中沒有a）。你能檢查一下嗎？ – 2012-01-09 18:37:04

啊，你是對的 - 我忽略了腳本的開始; $（'.sys_expandable li h3'）。wrapInner（''）; $（'。sys_expandable div.sys_section'）。hide（）; 這些是添加鏈接的行..請記住我之前手動加載JQuery和JQueryTools。 – Alex 2012-01-10 12:10:15

我創建了超鏈接添加的小提琴：http://jsfiddle.net/scaillerie/5GwND/。

是否按照你的要求工作？附件號碼：

來源

2012-01-09 18:42:25

啊，可悲的是 - 但我要感謝你，因爲這是你對JQueryTools選項卡的指示，它將我從JQuery UI轉換爲Tools。請查看我對上述帖子中關於加載的所有內容的回覆。 – Alex 2012-01-10 12:12:12

我嘗試了更多一點，並進一步得到了一點; [link] http://jsfiddle.net/5GwND/4/embedded/result/ 還有什麼想法？ – Alex 2012-01-10 13:17:43

您還必須在容器中嵌入3個選項卡。這是更新的小提琴：http://jsfiddle.net/scaillerie/5GwND/17/。 – 2012-01-10 14:27:23

在JQuery Tools選項卡中使用漸進式公開

回答

相關問題