打开页面时自动取消折叠 div

Question

我有一个这样的链接

<a href="http://192.168.178.165/home/item#145">Item</a>

当我单击该链接时，页面将打开并专注于该项目。有一个包含多个项目的列表，这些项目都使用 css 折叠：

.item-hidden {
    height: 0;
    overflow: hidden;
}

当我单击标题时，该div将未折叠。

有没有办法在打开该页面时以某种方式自动取消折叠该div from 链接？

更新

这是折叠和解折叠的功能

$(function () {
    $(".item-panel").click(function(){
        var itemId = $(this).attr('data-item-id');
        $('#'+itemId).toggleClass('item-hidden');
    });
});

Answer 1

只需将其写在脚本文件顶部，而不是所有其他函数

var itemId = location.hash;
if($(itemId).length != 0){
  $(itemId).removeClass('item-hidden');
}

Answer 2

你可以使用 CSS :target伪。

示例具有http://192.168.178.165/home/item#145：

<div id="145" class="item">
   <h2>I'm item 145</h2>
   <div class="content">I'm some content</div>
</div>

.item .content{
  display:none; /* collapse content (Toggles using jQuery anyways) */
}
.item:target .content{ /* If .item is :target, expand it's content! */
  display: block;
}

Answer 3

当页面打开/加载时，调用要展开的项目/div 标题上的click。