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

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

И где ВЫ написали что сайт стоит локально или на денвере? В упор не вижу. А даже если и локально - можно сохранить уже html-страницу вместе со всеми картинками и css файлами(в FF - команда Сохранить как). Далее выкладываете сюда в архиве страницу и мы смотрим.
 
Если я правильно понял суть проблемы, и затруднения в ее решении, это то что нет id у элементов.
К элементам в jquery можно обращаться очень по разному. Не обязательно прямо вот как вам написали с id делать.

Код:
$(".button_element").on("click", function(e) {
   $(".deepest .badge ul.level2").show();  //покажет все ul.level2 на странице
});

Смысл того что я тут написал. При клике на .button_element (простите из верстки я не совсем уловил на какой элемент кликать надо, вместо .button_element его пропишите, опять же не обязательно по id). Раскрываются все списки (UL) которые имеют класс level2.
Смысл в том что если вы хотите 3 одинаковых блока раскрыть не обязательно к каждому обращаться по id (это же не чистый js. для облегчения и используем jquery). А просто обратиться по общим классам. Т.Е. можно до них (до скрытых блоков) добраться как будто им хотите задать CSS стиль.
В моем примере: мы показываем все элементы UL с классом level2. Внутри .badge, который в свою очередь внутри .deepest (все что с точками впереди это css классы).

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

P.s. Если бы вы страничку выгрузили просто и показали, было бы нагляднее.
 
Последнее редактирование:
Вот, сохранил страничку...
 

Вложения

  • Страница.rar
    146,7 KB · Просмотры: 4
В твоем примере уже присутствует скрипт открывания блоков по одному 30 строчка <script src="./Страница_files/template.js"></script>

можно дописать за ним к примеру:
Код:
<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   $('li.level1.item1.parent').on('click', function(){
      $('li.level1.item1.parent div').show();
   });
});
-->
</script>
 
В твоем примере выше селекторы чуть другие))) чем в прикрепленном файле
Код:
<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>

Если селектор кнопки брать li.level1.item1.parent а скрытого блока с информацией за li.level2 , кстати селекторы кнопок и скрытой информации одинаковые у всех трех блоков...
Скрипт будет такой
Код:
<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   $('li.level1.item1.parent').on('click', function(){
      $('li.level2').show();
   });
});
-->
</script>
 
В твоем примере уже присутствует скрипт открывания блоков по одному 30 строчка <script src="./Страница_files/template.js"></script>

можно дописать за ним к примеру:
Код:
<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
   $('li.level1.item1.parent').on('click', function(){
      $('li.level1.item1.parent div').show();
   });
});
-->
</script>

Вставил Ваш код, уже что-то начинает получаться. В общем ситуация такая, при нажатии кнопки - раскрывается блок чья кнопка была нажата, другие два блока не раскрываются, но "Продолжение" выходит (для наглядности как в примере 2). При закрытии этого же блока, "Продолжение" с двух соседних пропадает только после перезагрузки страницы (пример 3). Хотелось сделать так, чтобы при нажатии кнопки любого блока все три блока открылись - вызывая "Продолжение", а при повторном нажатии - закрылись (пример 1).
 

Вложения

  • Пример 1.png
    Пример 1.png
    414,9 KB · Просмотры: 14
  • Пример 2.png
    Пример 2.png
    419,5 KB · Просмотры: 11
  • Пример 3.png
    Пример 3.png
    416,3 KB · Просмотры: 8
Мой код будет работать для кода страницы, выложенном в архиве Страница.rar
Код:
$('span.level1.parent').click(function(e) {
    if(e.originalEvent) {
        $('span.level1.parent').not($(this).get(0)).click();
    }
});

Этот код нужно вставить в js? Пробовал ставить в js - ничего не изменилось.
Пробовал вставить в страницу так:

<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function(){
$('span.level1.parent').click(function(e) {
if(e.originalEvent) {
$('span.level1.parent').not($(this).get(0)).click();
}
});
-->
</script>

Тоже результатов к сожалению "0"...
 
Последнее редактирование:
Этот код нужно вставить в js? Пробовал ставить в js - ничего не изменилось.
Пробовал вставить в страницу так:

Тоже результатов к сожалению "0"...

Во первых, вы ошиблись с кол-вом закрывающих скобок в коде, нужно вот так:
HTML:
<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function() {
    $('span.level1.parent').click(function(e) {
        if(e.originalEvent) {
            $('span.level1.parent').not($(this).get(0)).click();
        }
    });
});
-->
</script>

Во вложении страница с этим кодом, где всё работает.
 

Вложения

  • Страница_ed.rar
    146,8 KB · Просмотры: 2
Все же лучше переписать скрипт имеющийся <script src="./Страница_files/template.js"></script> чем городить огород который ты хочешь... по простому открытию блоков...
 
Назад
Сверху