Одновременное открытие трёх блоков

Тема в разделе "JavaScript", создана пользователем stanislavsss, 10 апр 2014.

Модераторы: ZiX
  1. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Здравствуйте Уважаемые мастера! Проблема такая - есть шаблон на Dle, в нём 3 блока: "Удобно", "Понятно", "Бесплатно", каждый из которых, при нажатии на кнопку отъезжает вниз раскрывая дополнительную информацию. Блоки расположены горизонтально на равном расстоянии друг от друга. Дело в том, что при нажатии на кнопку любого из этих трёх блоков раскрывшаяся информация двигает весь контент вниз, под двумя оставшимися нераскрытыми блоками остаётся пустое место. Идея в том, сделать так, чтобы при нажатии любой кнопки, любого из этих блоков все три блока открывались.

    На одном из форумов мне предложили такое вот решение:
    $(function(){
    $('.button')нажмите(function(){
    $('#блок 1, #block2, #block3').show('исчезать');
    });
    });

    <div class="button">При нажатии все три блока откроются</div>

    <div id="блок 1">Это первый блок</div>
    <div id="block2">Это второй блок</div>
    <div id="block3">Это третий блок</div>

    Эксперементировал с js и main.tpl - ничего не получилось (не могу найти и правильно прописать название кнопки и блоков указанных в js).

    К теме прилагаю ссылку на откорректированный от лишнего кода файл моего шаблона. Помогите кто знает в чем беда. Как и куда вставить этот код? Что туда прописать? Возможно просто код не рабочий?
    Перейти по ссылке
     

    Вложения:

    • Скрин.png
      Скрин.png
      Размер файла:
      352,3 КБ
      Просмотров:
      24
  2. Горбушка

    Горбушка Ищу её...

    Регистр.:
    2 май 2008
    Сообщения:
    3.175
    Симпатии:
    2.195
    Причём тут ДЛЕ? Тебе в JS...

    Код:
    $(function(){
    $('.button')нажмите(function(){
    $('#блок 1).show(1);
    $('#блок 2).show(1);
    $('#блок 3).show(1);
    });
    });
    Грубо говоря так...
     
    stanislavsss нравится это.
  3. IgorFIN

    IgorFIN Постоялец

    Регистр.:
    12 янв 2009
    Сообщения:
    75
    Симпатии:
    35
    Подключить библиотеку jQuery было бы неплохо


    Код:
    <script type="text/javascript" src="//yandex.st/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $('#button').on('click', function(){
          $('#block1, #block2, #block3).show();
       });
    });
    </script>
     
    Горбушка и stanislavsss нравится это.
  4. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Это всё хорошо, я думаю и первый и второй вариант конечно работать будут, но вся проблема в том, что если я вставлю предложенные варианты в свой js всё-равно ничего работать не будет так, как я не смог разобраться с id блоков в моём шаблоне, а также с id кнопки открытия, тоесть я на данный момент не понял, что прописать вместо #block1, #block2, #block3, а также что прописать вместо #button'. Вот такие дела... А по поводу библиотеки jQuery, так она и так присутствует в файлах движка.
     
  5. dwarf

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
    В выложенном архиве очень много лишнего.
    Выложи только html код, который отвечает за блоки и кнопки, можно даже не всю страницу.
     
  6. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Вот код отвечающий за эти блоки и кнопки (он такой мудрёный, я так и не понял что здесь отвечает за кнопку, ощущение, что часть кода отвечающего за открытие блока заимствована из другого блока расположенного в шаблоне справа, может поэтому у меня ничего не получается) :

    <section id="top-b" class="grid-block"><div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

    <div class="badge badge-new"></div>
    <h3 class="module-title">Удобно!</h3> <img class="size-auto" src="{THEME}/images/mod30000.jpg" width="276" height="168" alt="Demo" />
    <ul class="menu menu-sidebar">
    <li class="level1 item1 parent"><span class="level1 parent"><span>Sleep is one of the most important things.</span></span>
    <ul class="level2">
    <li class="level2"><span>Продолжение...</span></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

    <div class="badge badge-top"></div>
    <h3 class="module-title">Понятно!</h3> <img class="size-auto" src="{THEME}/images/mod20000.jpg" width="276" height="168" alt="Demo" />
    <ul class="menu menu-sidebar">
    <li class="level1 item1 parent"><span class="level1 parent"><span>Get some inspiration from one of quick.</span></span>
    <ul class="level2">
    <li class="level2"><span>Продолжение...</span></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

    <div class="badge badge-hot"></div>
    <h3 class="module-title">Бесплатно!</h3> <img class="size-auto" src="{THEME}/images/mod10000.jpg" width="276" height="168" alt="Demo" />
    <ul class="menu menu-sidebar">
    <li class="level1 item1 parent"><span class="level1 parent"><span>Stay well and track your daily fitness.</span></span>
    <ul class="level2">
    <li class="level2"><span>Продолжение...</span></a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </section>
     
    Последнее редактирование: 11 апр 2014
  7. dwarf

    dwarf Постоялец

    Регистр.:
    12 июн 2011
    Сообщения:
    88
    Симпатии:
    18
    клик по каким элементам из листинга вызывает "раскрытие" блока?
     
  8. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    dwarf, Вот на скрине красным обвёл... (изображение: 7YjBb4Cr.png)
     

    Вложения:

    • Скрин.png
      Скрин.png
      Размер файла:
      352,9 КБ
      Просмотров:
      30
    Последнее редактирование: 11 апр 2014
  9. Vishez

    Vishez

    Регистр.:
    19 авг 2013
    Сообщения:
    170
    Симпатии:
    81
    Не можешь узнать id элементов? А не пробовал в браузере щелкнуть правой кнопкой мыши по элементу и в инспекторе html посмотреть что да как. Для Firefox скачай Firebug - весьма удобная штука имхо. Ну или дай ссылку на сайт мы за тебя посмотрим, ибо разбираться вот так в коде неочень удобно.
     
  10. stanislavsss

    stanislavsss Постоялец

    Регистр.:
    28 ноя 2012
    Сообщения:
    87
    Симпатии:
    2
    Извините конечно милый человек! Имхо... Неможешь узнать id элементов... Да, конечно, не могу, прочитайте пожалуйста ветку и Вы может, возможно поймёте в чем у меня трабла и что да как, извините конечно, но если Вы сами не читаете тему и не вникли в неё, то зачем Вы пишите здесь вообще, сайт на денвере, был бы сайт - дал бы ссылку. Если Вы так много знаете, имхо, подскажите действенный вариант решения вопроса, что да куда вставить? Код выложен, id, как я понял для Вас найти как два пальца об асфальт, зачем тогда писать бесполезные посты???