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

使用location.hash激活jquery toggle / slideToggle

1 个答案: