javascript - 文本点击显示(功能)

Question

我在这里需要一点帮助，请原谅我的新手编程。

我有这段代码 javascript

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
}

这就是在我的 html 上继承它的方式

<a href="#" onclick="toggle_visibility('something');"><center>Show something</center></a>

<div id="something" style="display:none;">
<p>something</p>
</div>

它的作用是当有人点击“显示某些内容”时，div 中的文本就会显示出来。我有两个问题，希望你能指导我。

网站上放置它的位置不在开头，当单击 href="#" 时，查看器会向上滚动到网站的开头。

请注意，我只想单击文本。不是按钮。

第二个也是可选的:我可以做任何事情来在下面的代码中添加 jQuery，以便它在点击显示时有一个小动画吗？

Answer 1

已被弃用，这意味着使用它不再明智。最好调整 CSS 文件中的位置。还建议不要在元素上使用像 style=""这样的内联样式，您也应该将它们放在 CSS 文件中。不建议使用onclick事件，而是添加事件监听器。

这里有一个 JSFiddle，用于简单的 Javascript 版本，说明如何实现这些目标:https://jsfiddle.net/u8zc6yfo/2/

window.onload = function () {
var clickableItems = document.getElementsByClassName("clickable");
for (var i = 0; i < clickableItems.length; i++) {
    clickableItems[i].addEventListener("click", function () {
        toggle_visibility(this.id);
    });
}

}

function toggle_visibility(id) {
    var getToggleItem = document.getElementById(id).getAttribute("data-toggle");
    var e = document.getElementById(getToggleItem);
    (e.style.display != "block") ? e.style.display = "block" :    e.style.display = "none";
} 

和 HTML:

<div class="wrapper">
<span id="toggleshowsomething" data-toggle="something" class="clickable center">Show something</span>

<div id="something">
    <p>something</p>
</div>

和CSS:

.wrapper {
width: 300px;
margin:0px auto;
}
.clickable {
color: blue;
cursor: pointer;
}
.clickable:hover {
color: purple;
}
#something {
display: none;
}
}

这一切的作用是，任何分配有“clickable”类的项目都将添加一个事件监听器。单击该项目时，由于您希望它切换不同的元素，因此可以将其存储在 data-toggle:"whateverIdYouWantToPointTo"中 - 然后，通过三元语句:( bool 检查)？真假 ;确定是否隐藏具有在 data-toggle 中列出的 id 的项目。我这样做是因为如果没有设置显示属性，您的代码将不会考虑。

(e.style.display != "block") ?  //says to check if display is not shown as block
//this is what to do if it returns true
e.style.display = "block";
//show element
:
//this is what to do if it returns false
e.style.display = "none";
//hide element
}

然后为了完整起见，我做了一个 JQuery 模型，可以找到:https://jsfiddle.net/o6wozosu/

    window.onload = function() {
    $(".clickable").on("click", function() {
    var useId = $(this).attr("data-toggle");

    $("#" + useId).fadeToggle();
    });
    }

这是同样的事情。您可以使用 fadeToggle() 方法来执行进出动画，.toggle();只是突然改变显示。还有 .animate({})，它采用不同的 css 变量并允许通过 JQuery 实现平滑的动画。您可以在此处阅读相关文档:http://api.jquery.com/animate/