在slideToggle移除display:hidden属性后，将焦点设置为元素

Set focus to element after slideToggle removes display:hidden attribute with jQuery

本文关键字：焦点 设置 元素 属性 移除 slideToggle display hidden      更新时间：2023-09-26

所以我看了一堆例子，似乎仍然不能弄清楚这个。我有一个元素，我隐藏"display:none"，直到它被一个使用jQuery slideToggle的链接展开。工作，但我需要的焦点去新的元素div。我已经尝试了一堆的例子，似乎没有工作，所以我将它张贴在这里。

这是小提琴:JS FIDDLE

点击这个链接:

<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>

我想做两件事，好吧，三件，但两件就很棒了。1. 滚动到这个DIV，它就在页面的下面一点。2. 注意现在显示的文字

显然，因为节点是隐藏的，所以它不会聚焦到它或其他影响它的东西，它没有任何东西可以滚动到，或者当我尝试它只是一直滚动到顶部。但我有一个固定的标题，所以不工作，因为它只是隐藏。所以我现在所做的就是滚动到div然后我可以告诉你。专注于它。但我需要从顶部设置，当我尝试时，它会破坏滚动。有人看到我做错了什么吗?

$(function() {
$("#whyDivCloser").click(function () {
    $("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
    $("#whyDiv").slideToggle("slow");
});
});

如有任何帮助，不胜感激

看起来当您最初将display:none 应用于div时，点击a链接将不再将用户引导到目标div。要解决这个问题，您可以尝试使用代码来隐藏div最初使用slideToggle，当然div的初始状态是display:block, slideToggle将为您隐藏它，而不是初始设置display:none，同时点击链接将预期地工作(跳转到目标div)。

JS : 

$(function() {
  $("#whyDiv").slideToggle("slow"); //add this line to hide it initially
  $("#whyDivCloser").click(function () {
    $("#whyDiv").slideToggle("slow");
  });
});
$(function() {
$('#whyDivLink').click(function (evt) {        
         //append .focus() to focus the text
         $("#whyDiv").slideToggle("slow").focus();  
    });
});

更新演示。

相关文章：