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来解决此问题。

此外，即使在setTimeout左右$('.expand').find('a[href*='+ thash + ']').trigger('click');，它也不适用于我。我将其更改为$(thash).click();。

＆＃34; expand.js＆＃34;的完整代码文件：

$(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("â–¼");
       }
    });
});

显然箭头在这里没有正确显示，所以请注意，如果你复制/粘贴它。

从Href打开扩展列表

1 个答案: