Использование прогрессивного раскрытия на вкладке Инструменты JQuery - PullRequest
0 голосов
/ 09 января 2012

Э-э, мальчик .. У меня есть клиент, который хочет, чтобы КАЖДЫЙ звонок и свисток появлялись на их страницах.Конечно, я использую JQuery;дизайнеры-оригиналы предоставили мне различные скрипты на заказ, однако теперь список требований вырос, и я начал изменять и добавлять исходный плоский HTML.

Похоже, дизайнеры использовали пользовательский интерфейс JQuery - но, честно говоря,все функции, которые, я думаю, были полностью уничтожены, поскольку они также предоставили сделанные на заказ сценарии для Cycle, Hover, Chosen.Мне не понравилась функция вкладок, так как я не мог приспособить ее к новым требованиям клиента.Поэтому я обратился к 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 Ответ

1 голос
/ 09 января 2012

Я создал скрипку с добавленной гиперссылкой: http://jsfiddle.net/scaillerie/5GwND/.

Работает ли как хочешь?

...