Jump to content
  • 0

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


fiver
 Share

Question

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

Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (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 by fiver
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

  • 0
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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By SHADOWtop1gg
      суть проблемы: создано два элемента - Аккордеон с 3 раскрывающимися пунктами и кнопка при нажатии на которую происходит так же раскрытие дочернего элемента. все работает исправно но если я в html, код аккордеона расположу над кодом кнопки то при открытии элемента аккордеона кнопка сместится вниз и наоборот. мне нужно это исправить любым способом. ошибок в коде нет мне просто нужен вариант.
       
    • By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Tascan
      Всем привет.
      В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
      Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
      А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy