Как я могу пойти на якорь и одновременно открыть Бутстрэп-аккордеон?

Я использую Бутстрэп-аккордеон, и он работает как заклинание, никаких проблем. Тем не менее, я хотел бы иметь ссылку на одну из вкладок в аккордеоне. Идея заключается в том, что как только я нажимаю на ссылку, я попадаю в ту часть страницы (аккордеон действительно находится внизу страницы) и открываю вкладку.



Поэтому я использовал следующее: 



<a href="#prizes" data-toggle="collapse" data-parent="#accordion"><i class="mdi-action-info"></i></a>


Который должен работать. И это отчасти так: он открывает вкладку аккордеон правильно, однако страница не прокручивается до якоря, как это должно быть. Это просто остается в том же положении, но открывая аккордеон.



Есть идеи, как это исправить? Я нашел ответы, связанные с jQuery UI accordion, но ничего о BS accordion (и ответы на jQuery UI тоже не работали), действительно не знаю, почему это не работает

564   4  

4 ответов:

Вы можете сделать это вручную следующим образом: 

<a href="#accordion" id="my-link" class="btn btn-primary">Open group 2</a>

JS 

$('#my-link').click(function(e) {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');        
});

Скрипка

3  
2015-03-29 06:01:08

Для того чтобы перейти к якорю, вы должны дождаться, пока ваш сворачиваемый div не будет полностью показан.

JQuery помогает нам легко разобраться с этим, свернув события. 

$(document).ready(function() {
    $("#section-two").on('shown.bs.collapse', function() {
        window.location = "#section-two";
    });
});

Проверьте Bootstrap JS Collapse Reference on w3schools.com для быстрого документирования.

3  
2017-05-25 16:31:10

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

Ваша веб-страница будет выглядеть примерно так: 

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-one" target="_blank">Section One</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section One Text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-two" target="_blank">Section Two</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section Two Text
      </div>
    </div>
  </div>
</div>
<div>

Теперь для кода: 

$(".accordian-button").click(function(e) {
  that = $(this)
  accordian = that.siblings('.accordian-body')
  $(".accordian-body").not(accordian).collapse('hide')
  accordian.collapse('toggle')
})

// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')

Вот рабочая скрипка:
http://jsfiddle.net/dkcb8jLq/31/

Обратите внимание, что вы можете просто нажмите на div, чтобы переключить его, или вы можете нажать на текст, чтобы переключиться и перейти по ссылке.

0  
2015-05-18 15:51:11

В моем случае я предпочитаю избегать добавления JavaScript и решаю использовать два атрибута (data-target и href), чтобы каждый из них имел одно задание: 1) запустить вкладку и 2) Перейти к якорю:

<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">

0  
2018-03-21 17:43:43

Comments

    Ничего не найдено.
Click here to cancel reply.