Javascript 使用location.hash激活jquery切换/滑动切换

我有一个使用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 a”）.toggle（函数（）{
$（this）.addClass（“选中列表”）；
}，函数（）{
$（此）.removeClass（“选中列表”）；
});
$（“#列表功能h3 a”）。单击（函数（）{
$（“+this.id）.slideToggle（'fast'）；
返回false；
});
});    

这使得如果点击一个链接，它将切换h3的类更改、display:block/display:inline和从div中滑出。它工作正常

但是，现在我需要它，以便使用像index.php#feature1这样的url，该列表项的切换将被激活，就像它被单击一样。我知道我需要使用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)
        }
    }
});

---

除了h3上的类没有改变之外，这一切都很好。我怎么做呢？只需添加

$（“+id”）.addClass（“选中列表”）。我将编辑答案。这将更改检查列表包装上的类，我正在尝试更改它上面h3上的类，如果我添加此选项，我将更改所有选项：$（“#列表功能h3 a”）.addClass（“检查列表#选中”）；我不知道什么是
check\u list\u wrap
，您需要包含HTML。我还更新了答案以修复一些拼写错误。我非常确定您需要响应
onload
事件，以便新的单击将为您的脚本注册一些要响应的内容。诀窍是页面不会真正重新加载，但您仍然可以获得事件。