如何使扩展折叠并扩展以像锚一样移动到顶部

How to make expand collaspe and expand to move to top like anchor

本文关键字：扩展 一样 顶部 移动 折叠 何使      更新时间：2023-09-26

我对JS或JQuery的知识为零，正在学习这样做

我

正在尝试更新我的代码，这将有助于我执行以下操作

我正在尝试同时实现以下几点：

  1. 单击锚链接时，页面会将内容移动到页面顶部。
  2. 当您单击对象的展开时，其他对象会折叠

我终于在这里编译了这段代码

点击这里查看链接

Please help me in achieving both the points

感谢您的努力

你需要像这样修改你的collapseExpandLink函数。我添加了一个 For 循环，它将遍历所有链接并关闭所有链接。至于滚动，我从用户 MSolanki 的答案中借用了一些代码。使用的方法是ScrollIntoView。

代码笔示例

function collapseExpandLink(evt) {
  if (this.collapseDiv.style.display == '') {    
    this.parentNode.parentNode.nextSibling.style.display = 'none';
    this.firstChild.nodeValue = 'expand';    
  } else {
    //Close all DIVs    
    for(var i = 0;i < collapseLinks.length;i++){
      collapseLinks[i].parentNode.parentNode.nextSibling.style.display = 'none';
    }
    this.parentNode.parentNode.nextSibling.style.display = '';
    this.firstChild.nodeValue = 'collapse';
    //Scroll page to current clicked link
    this.scrollIntoView();
  }
  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}

[更新]

您需要在用于创建所有可折叠链接的函数中使用 javascript 添加图像。

更新的代码笔示例

function createCollapseLink(element, siblingContainer, index) {
  var span;
  //Create an image element
  var img = document.createElement("img");
  //Provide image src url
  img.src = "http://www.webster.ch/_resources/images/down-arrow.png";
  //Add classname
  img.className = "myImg"
  if (document.createElement && (span = document.createElement('span'))) {
    span.appendChild(document.createTextNode(String.fromCharCode(160)));
    var link = document.createElement('a');    
    link.collapseDiv = siblingContainer;
    link.href = '#';
    //Wrapping image inside all links
    link.appendChild(img);
    link.onclick = collapseExpandLink;
    collapseLinks[index] = link;
    span.appendChild(link);
    element.appendChild(span);
  }
}
根据

我的理解，您指定了带有"#"作为 href 的锚标记的第一点，因此单击锚标记正在向上移动。 因此，单击锚标记时，您可以返回 false。 这样它就不会上升。

这是我为您创建的示例代码。我已经稍微改变了结构，将 H1 和 p 标签包装在一个div 中。

请看这里 jsfiddle

这是工作代码。我没有花时间优化它，但至少会让你继续前进。

$(function() {
  $("div > p").hide();
  $("h1").each(function() {
    var $a = $("<a href='javascript:{}'>Expand</a>")
    $a.insertAfter($(this));
    $a.click(function() {
      var text = $(this).text();
      if (text.toLowerCase() == "expand") {
                $div =  $(this).parent();
        $p = $div.find("p");
        $p.show();
        $(this).text("Collapse");
        $(this).parent().get(0).scrollIntoView();
        var siblings = $div.siblings()
        siblings.find("p").hide();
        siblings.find("a").text("Expand");
      }else
      {
            $(this).text("Expand");
          $(this).parent().find("p").hide();
      }
    })
  })
})
相关文章：