Использование location.hash для активации jquery toggle / slideToggle - PullRequest
Новая
       31

Использование location.hash для активации jquery toggle / slideToggle

2 голосов
/ 15 июля 2011

У меня есть список списка, в котором используются jquery toggle и slideToggle, так что при нажатии элементов пояснительный текст выдвигается и класс меняется на h3.HTML-код для элементов выглядит следующим образом: 

<li><h3><a href="#" target="_blank" id="feature1" name="feature1">What do I know about javascript?</a></h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>

Я включил файлы jquery, а затем записал это в заголовок: 

<script type="text/javascript">
    $(function() {  
    $("#listfeatures h3 a").toggle(function(){
        $(this).addClass("check_list_selected");
    }, function () {
        $(this).removeClass("check_list_selected");
    });
        $("#listfeatures h3 a").click(function() {
            $("."+this.id).slideToggle('fast');
                return false;
        });
    });    
</script>

Это делает так, чтобы при нажатии на ссылку, это переключит изменение класса h3, дисплей: блок / дисплей: встроенный и выдвигающийся из div.Работает нормально.

НО, теперь я хочу, чтобы при URL-адресе, подобном index.php # feature1, переключение для этого элемента списка было активировано, как если бы на него нажимали.Я знаю, что мне нужно использовать location.hash, но я не уверен, как это сделать.С чего мне начать?

1 Ответ

1 голос
/ 15 июля 2011

location.hash содержит все в URL, включая и после знака хеша (#). Итак, если вы зашли на index.php # feature1 и хотите, чтобы div с id «feature1» отображался при загрузке, вы можете сделать 

$(document).ready(function() {
    if(location.hash) {
        var id = location.hash.slice(1);    //Get rid of the # mark
        var elementToShow = $("#" + id);    //Save local reference
        if(elementToShow.length) {                   //Check if the element exists
            elementToShow.slideToggle('fast');       //Show the element
            elementToShow.addClass("check_list_selected");    //Add class to element (the link)
        }
    }
});
...