Открытие слоя (collapse) в bootstrap по хэш

fiver · October 4, 2016

Здравствуйте!

Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (collapse.js). Штука весьма полезная и очень удобная. Но вот кое какой функционал не доведен до ума. А именно возможность перехода к нужному развернутому слою, и дальнейшей работе с меню аккордеона.

Подробнее: есть страница (PAGE1) на которой 10 кнопок и 10 слоев. Слои имеют id по порядку (el1, el2, el3, el4, el5 и т.д.). Есть кнопки которые открывают эти слои (Салаты, Супы, Гарниры ...).

Есть другая страница, на которой есть ссылки типа: /PAGE1/?menu=sreda#el3. Надо что бы при переходе с этой страницы на PAGE1 открылся элемент 3.

решение такое существует и работает. Извлекает хэш и открывает нужный слой, если хэш пустой, то открывает первый слой.

<script>
$(function(){
  var hash = window.location.hash;
  $('.panel-collapse').hide();
  $('.panel-collapse').each(function(){
    $(this).removeClass('in');
  });
  if (hash) {
    $(hash).show().addClass('in');
  }
  else {
    $('#el1').show().addClass('in');
  }
});
</script>

Но после перехода не работает меню на странице. Т.к. URL имеет вид /PAGE1/?menu=sreda#el3, то 3 слой всегда открыт. А остальные слои просто не работают.

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

Спасибо.

Edited October 4, 2016 by fiver

wwt · October 4, 2016

ваш код выше не изменяет работы базового функционала, а вмешивается в его работу, причем наигрубейшим способом.

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

Не нужно присваивать классы "in" и т.д. , используйте trigger() для эмуляции события клика и плагин отработает сам.

fiver · October 4, 2016

Простите за наглость излишнюю. Просто я профан в яве скриптах. Не могли бы Вы показать пример эмуляции клика по ссылке.

andrey7287 · October 5, 2016

19 часов назад, fiver сказал:

Не могли бы Вы показать пример эмуляции клика по ссылке.

$('a').click();

fiver · October 5, 2016

21 час назад, wwt сказал:

ваш код выше не изменяет работы базового функционала, а вмешивается в его работу, причем наигрубейшим способом.

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

Не нужно присваивать классы "in" и т.д. , используйте trigger() для эмуляции события клика и плагин отработает сам.

Огромное спасибо за прекрасную идею. Поковырялся, разобрался. Оказывается там кода пол строчечки.

Кому интересно, я для теста эммуляции клика составил небольшой рабочий код, где наглядно можно увидеть его работу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>тест</title>
<style>
#block_2{display:none;}
#block_1:target #block_2{display:block;}
</style>
</head>
<body>

<a id="el3" href="#" onclick="openbox('box'); return false"><div>Open</div></a><br /><br />
<div id="box" style="display: none;">BLOK</div>

<!-- этот скрипт управления разворачиванием или сворачиванием слоя box -->
<script type="text/javascript">
function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }}
</script>

<!-- а эта строчка как раз кликает по ссылке (для наглядности клик отложил на 0,5 сек.)-->
<script type="text/javascript">
jQuery(document).ready( setTimeout(function() { jQuery('#el3').trigger("click"); }, 500) );
</script> 

</body>
</html>

Sign In

Открытие слоя (collapse) в bootstrap по хэш

Question

fiver

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

fiver

Link to comment

Share on other sites

andrey7287

Link to comment

Share on other sites

fiver

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information