打开页面

Question

我有这样的链接

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

当我点击该链接时，页面会打开并专注于该项目。有一个列表，其中包含所有已使用css折叠的项目：

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

当我点击标题时div没有崩溃。

当打开该页面时，有没有办法以某种方式自动从链接中解除该div？

更新

这是折叠和解除隐藏的功能

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

Answer 1

您可以使用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 2

只需在所有其他功能之外的脚本文件上写下

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

Answer 3

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