使用 location.hash 激活 jquery toggle/slideToggle

Question

我有一个使用 jquery 切换和 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 的类更改、display:block/display:inline 和滑出 div。它工作正常。

但是，现在我想要它，以便使用 index.php#feature1 之类的 url，该列表项的切换将被激活，就好像它已被单击一样。我知道我需要使用 location.hash 但我不知道该怎么做。我应该从哪里开始？

Answer 1

location.hash 包含 URL 中的所有内容，包括井号 (#) 标记和之后的所有内容。因此，如果转到 index.php#feature1 并希望 id 为“feature1”的 div 在加载时显示，您可以这样做

$(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)
        }
    }
});