在JQuery Tools选项卡中使用渐进式披露

时间:2012-01-09 18:26:26

标签: jquery jquery-tools

呃男孩..我有一个客户,他们想要在他们的页面上发出铃声和哨声。当然我在使用JQuery;原始设计师为我提供了各种定制脚本,但是现在需求列表已经增长,我已经开始修改并添加到原始的平面HTML。

设计师似乎已经使用了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>

有人能看到冲突吗?我把头发拉过这个!

提前感谢任何有线索的人。

1 个答案:

答案 0 :(得分:1)

我创建了一个添加了超链接的小提琴:http://jsfiddle.net/scaillerie/5GwND/

它能按您的意愿工作吗?