JQuery Toggle & Anchor Links - PullRequest
Новая
       0

JQuery Toggle & Anchor Links

1 голос
/ 06 сентября 2011

Я использую эффект переключения jQuery из Sohtanaka для «показа» и «скрытия» контента.

Это jQuery: 

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});

});

и это мой HTML: 

<h2 class="trigger"><a href="#test1">Test 1</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

<h2 class="trigger"><a href="#test2">Test 2</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

<h2 class="trigger"><a href="#test3">Test 3</a></h2>
 <div class="toggle_container">
  <div class="block">
    <h3>Content Header</h3>
    <p>content</p>
  </div>
 </div>

Все работает как положено.

Я хотел бы знать, что нужно изменить, чтобы конкретный контейнер отображался, когда соответствующий якорь находится в конце URL-адреса?

например. Если мой URL-адрес «www.domain.com/content/#test2», я бы хотел, чтобы контейнер «Тест 2» отображался, а «Тест 1» и «Тест 3» оставались скрытыми.

Большое спасибо.

Ответы [ 3 ]

2 голосов
/ 06 сентября 2011

Вы должны быть в состоянии добавить эту функциональность в ваш код следующим образом: 

$(document).ready(function() {
    $(".toggle_container").hide();
    $("h2.trigger").click(function() {
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

    $("a[href='" + window.location.hash + "']").parent(".trigger").click();
});
0 голосов
/ 06 сентября 2011 
$(document).ready(function() {
    $('a').each(function() {
        if($(this).attr('href') == window.location.hash) {
            $(this).parent(".trigger").click();
        }
    });
);
0 голосов
/ 06 сентября 2011

window.location.hash будет содержать значение #test2, если URL-адрес http://www.domain.com/content/#test2.Это то, что вы должны использовать в селекторе атрибутов jQuery, который вы используете, чтобы найти элемент <a> в обработчике готовности: 

$(document).ready(function() {
    ...

    if (window.location.hash) {
        $('h2.trigger + .toggle_container').hide(); // Hide all...
        $('h2.trigger').has("a[href='" + window.location.hash + "']").next('.toggle_container').show(); // ... but show one
    }
});

( Demo . Более элегантная реализация связанасуществовать.)

Обновление
Мой первый ответ был неверным во многих отношениях: -S

...