Jquery скрывает дочерние вкладки и отображает при первом нажатии - PullRequest
Новая
       16

Jquery скрывает дочерние вкладки и отображает при первом нажатии

0 голосов
/ 19 апреля 2011

Я использую jQuery Tools для создания серии вкладок внутри вкладок (вложенных вкладок).Вы можете увидеть демонстрацию эффекта здесь (2-я демонстрация): http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm

Я пытаюсь показать только первую серию вкладок при загрузке страницы, а затем одну, которую вы нажимаете на вкладке, этозагружается как обычно.

В настоящее время я использую jquery для достижения этого эффекта, но это НЕТ ПУТИ.Вот мой код: 

//set the 2nd row of tabs to be invisible (display none doesnt work)
$(".pane:first").css("opacity","0");

//remove the class current, so the first tab doesnt show it's current css state
$("ul.tabs li a.current").removeClass("current");

//when any tab is clicked
$("ul.tabs a").click(function(){

    //animate the 2nd row of tabs back to full opacity
    $(".pane:first").animate({
              "opacity":"1"
        }, 1000);
    });

ПРОБЛЕМА ОДНА: Я хочу, чтобы это работало только в ПЕРВЫЙ раз, когда нажата кнопка ul.tabs a.После того, как непрозрачность равна 1, мне не нужно запускать этот сценарий каждый раз, когда нажимается ul.tabs a

ПРОБЛЕМА ВТОРАЯ: поскольку я просто устанавливаю непрозрачность на 0, элементы все еще загружаются в DOM и берудо космоса.Я не могу использовать display: none, потому что скрипт tab js его игнорирует.

Это работает ... но я знаю, что это не лучший способ сделать это.Любые идеи о том, как я могу оптимизировать этот код или пойти по-другому?

СПАСИБО!

1 Ответ

0 голосов
/ 19 апреля 2011

Использование .one решит вашу первую проблему.Пользовательский интерфейс jQuery имеет довольно простую в использовании функцию вкладок, которая прекрасно работает с вложенными вкладками.Это может решить проблему 2 (позволяя вам установить отображение: нет). 

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

ETA: Просто, чтобы сделать это немного проще 

$("ul.tabs a").one("click", function(){

    //animate the 2nd row of tabs back to full opacity
    $(".pane:first").animate({
              "opacity":"1"
        }, 1000);
    });
...