jQuery已弃用' .toggle()'.寻求替代方法

本文介绍了jQuery已弃用' .toggle()'.寻求替代方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

由于.toggle()在jQuery中已已弃用，所以我正在寻找一种新的简单解决方案将使我能够创建一个阅​​读更多"按钮，该按钮可将段落向下滑动，同时将按钮文本更改为阅读较少".

我整理了以下工作代码:

var moreText = "Read more"; var lessText = "Read less"; $(document).ready(function () { $("a.readmorebtn").text(moreText); $("a.readmorebtn").toggle(function () { $("a.readmorebtn").text(lessText); $("p.more").slideToggle(0); }, function () { $("a.readmorebtn").text(moreText); $("p.more").slideToggle(0); }); });

jsfiddle/approach/gDvyR/

您会在小提琴中看到左侧的选项已选中"Migrate 1.1.0"，这是使.toggle()与此最新版本的jQuery一起工作的唯一方法./p>

我的问题是，您能想到另一种执行相同功能但不使用.toggle()和Migrate的方法吗?

很抱歉，如果您认为此问题已在其他地方得到解答，但我一直在寻找变通办法相对简单"的提示，而没有真正看到任何确定的方法.不幸的是，对jQuery来说，它并不陌生！

非常感谢.

解决方案

我个人认为此处的所有答案都无法满足您的需求.这应该可以解决问题，并且可以多次出现. jsfiddle/BramVanroy/gDvyR/5/

var moreText = "Read more", lessText = "Read less", moreButton = $("a.readmorebtn"); moreButton.click(function () { var $this = $(this); $this.text($this.text() == moreText ? lessText : moreText); $this.next("p.more").slideToggle("fast"); });

Since .toggle() was deprecated from jQuery, I am looking for a new simple solution which will enable me to create a "Read more" button which slides down a paragraph whilst changing the button text to "Read less".

I have put together this working code:

var moreText = "Read more"; var lessText = "Read less"; $(document).ready(function () { $("a.readmorebtn").text(moreText); $("a.readmorebtn").toggle(function () { $("a.readmorebtn").text(lessText); $("p.more").slideToggle(0); }, function () { $("a.readmorebtn").text(moreText); $("p.more").slideToggle(0); }); });

jsfiddle/approach/gDvyR/

You'll see in the fiddle that 'Migrate 1.1.0' is checked on the options on the left, which is the only way to make .toggle() work in this way with this (newest) version of jQuery.

My question is, can you think of another way of performing the same function but without using .toggle() and Migrate?

Apologies if you feel this question has been answered elsewhere, but I keep finding hints at the workarounds being "relatively straightforward", without really seeing any definitive approaches. Unfortunately being new to jQuery it doesn't seem so straight forward to me!

Many, many thanks.

解决方案

I personally think all the answers here are too elaborate for what you need. This should do the trick just fine and it works with multiple occurences. jsfiddle/BramVanroy/gDvyR/5/

var moreText = "Read more", lessText = "Read less", moreButton = $("a.readmorebtn"); moreButton.click(function () { var $this = $(this); $this.text($this.text() == moreText ? lessText : moreText); $this.next("p.more").slideToggle("fast"); });