Question

我对JS或JQuery没有任何了解，并且我正在学习这样做

我正在尝试更新我的代码，以帮助我执行以下操作

我试图立即实现以下几点：

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

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

Please help me in achieving both the points

感谢您的努力

Answer 1

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

Codepen Example

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添加图像。

Updated Codepen example

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);
  }
}

Answer 2

根据我的理解第1点你指定了锚点标记，其中“＃”为href，因此点击锚标记正在向上移动。所以onclick of anchor tag你可以返回false。所以它不会上升。

Answer 3

以下是我为您创建的示例代码。我已经改变了一点结构来将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();
      }
    })
  })
})

如何使膨胀collaspe和扩展像锚一样移动到顶部

3 个答案: