jQuery раздвижные дивы - PullRequest
Новая
       1

jQuery раздвижные дивы

0 голосов
/ 08 июля 2011

У меня есть три кнопки с изображениями, и как только я нажимаю на одну из них, появляется скользящий элемент с текстом.

Вот мой код JavaScript: 

    <script type="text/javascript">
    function showSlidingDiv() {
        $("#slidingDiv").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv2() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    function showSlidingDiv3() {
        $("#slidingDiv2").animate({
            "height": "toggle"
        }, {
            duration: 300
        })
    }
    </script>

Функция вызывается этой командой: 

    <a href="#" onClick="showSlidingDiv(); return false;">

Сценарий работает нормально, но в настоящее время, если я щелкаю по всем ссылкам, содержимое которых дополняет друг друга, то чего я хотел бы добиться - это скрыть открытый класс div, как только я нажму на новую ссылку.

Как бы я это сделал?

1 Ответ

1 голос
/ 08 июля 2011

Я бы порекомендовал использовать плагин jQuery accordion .

Обновление: Вы можете закрыть все div и открыть один выбранный: 

    function toggleDiv(selectedDiv) {
      // shortcut to select all sliding divs
      $('div[id^="sliding"]').animate({
              "height": "toggle"
          }, {
              duration: 300
          }, function () {
                $(selectedDiv).show();
      });
              }

В ваших hrefs, вызовите функцию так: 

onClick="toggleDiv('#slidingDiv1'); // use slidingDiv2, 3 for other hrefs
...