Как определить правильный элемент для отображения на основе привязки внутри элемента?

На своей странице я использую несколько свернутых групп Twitter Bootstrap. Каждая группа может содержать несколько якорей:

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#section1"></a><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Section 1</a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                <p><a href="#section1-text1"></a>Section 1 - Text 1</p>
                <p><a href="#section1-text2"></a>Section 1 - Text 2</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#section2"></a><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Section 2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <p><a href="#section2-text1"></a>Section 2 - Text 1</p>
                <p><a href="#section2-text2"></a>Section 2 - Text 2</p>
            </div>
        </div>
    </div>
</div>

Если моя страница открывается с определенным хэшем в URL-адресе (например, http://example.com#section2-text2), то должен отображаться соответствующий коллапс. Я планирую использовать window.location.hash, чтобы понять, какой свернуть показывать (jsfiddle):

  var hash = window.location.hash;
  if (hash == '#collapseOne' || hash == '#collapseTwo') {
    $(hash).collapse('show');
  }

Но у меня есть два вопроса:

  1. как определить правильное свертывание, чтобы показать, что хэш не содержит его имя (например, якорь и хеш равны somethingelse-text2, т.е. не содержат section2); как найти parent свернуть элемент якоря somethingelse-text2?
  2. должен ли я вручную прокручивать якорь после показа коллапса?

javascript html jquery twitter-bootstrap twitter-bootstrap-2
person LA_    schedule 10.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Для первой части вашего вопроса вы можете использовать что-то вроде этого:

var hash = window.location.hash;
if(hash){
    var targetAnchor = $(hash + ",a[href='"+hash+"']");
    if(targetAnchor.length > 0){
        targetAnchor.closest(".collapse").collapse('show');
    }   
}

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

$('html, body').animate({
    scrollTop: targetAnchor.offset().top
}, 2000);

На основе этого ответа.

person chimmi    schedule 10.04.2014
comment
Спасибо, чимми. Единственный вопрос, который у меня есть - первый код хорошо работает с элементами типа #section1-text1, но не работает с элементами типа #collapseOne. Похоже, я должен как-то идентифицировать тип targetAnchor (class="accordion-toggle"?) и либо искать parent, либо применять collapse('show') к самому элементу. - person LA_; 10.04.2014
comment
Я обновил ответ кодом для обработки таких элементов, как #collapseOne. Спасибо за вашу помощь! - person LA_; 10.04.2014
comment
Упс, я сделал то же самое чуть позже. Добро пожаловать. Однако имейте в виду, что некоторые специальные символы, разрешенные в хеше, могут нарушить работу селектора jQuery. - person chimmi; 10.04.2014