javascript - 从 Href 打开扩展列表

Question

我正在尝试修改 this pen I found on CodePen 。我希望能够从另一个页面打开该页面上的特定列表。单击该链接应在页面加载时打开下一页上的相应部分。

对于 jQuery，我是个新手，所以我很感谢我能得到的任何帮助。我尝试四处寻找并了解我需要实现的目标，但我一直无法实现它。这是我的代码:

HTML:

<!--Link on Previous Page-->
<a href="test/#list">Click Here</a>


<!--Target List-->
<div class="integration-list">
  <ul>
    <li class="integration">
    <a class="expand" id="list">
    <div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
    <div class="right-arrow">&#9660;</div>
    </a>

    <div class="detail">
      <div><p>Lorem Ipsum Dolor...</p></div>
    </div>

    </li>
  </ul>
</div>

JS:

$(function() {
$(".expand").on( "click", function() {
  $(this).next().slideToggle(100);
  $expand = $(this).find(">:nth-child(2)");

  if($expand.text() == "▼") {
  $expand.text("▲");
} else {
  $expand.text("▼");
}

var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');

  });
});

Answer 1

为了让它发挥作用，我做了一些事情:

触发事件可能在处理程序实际附加之前触发。您可以使用 setTimeout 作为解决此问题的方法。

此外，即使 $('.expand').find('a[href*='+ thash + ']').trigger('click') 周围有 setTimeout ; 它对我不起作用。我将其更改为简单的 $(thash).click();。

“expand.js”文件的完整代码:

$(function() {

    var hash = window.location.hash;
    var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
    setTimeout(function() {
        $(thash).click();
    }, 10);

    $(".expand").on( "click", function() {
    $(this).next().slideToggle(100);
    $expand = $(this).find(">:nth-child(2)");

    if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
          $expand.text("â–²");
       } else {
          $expand.text("â–¼");
       }
    });
});

显然，此处的箭头无法正确显示，因此，如果您复制/粘贴此内容，请注意。