在按钮内滑动切换文本内容

Posted 2023-02-25

【中文标题】在按钮内滑动切换文本内容

【英文标题】：Slide toggle text content inline within a button

【发布时间】：2016-02-17 23:56:52

【问题描述】：

我寻找过与我的问题类似的问题，但我似乎是独一无二的。 所以我有一个 div 列表，其中有一个 <a> 标记，然后切换出一个内联描述，该描述位于父 div 内的隐藏跨度标记内。

我依靠 jQuery UI 库来为滑动切换设置动画。默认情况下，jQuery 切换和 slideToggle 不适合我想要的 - 我只想沿着 x 轴（宽度）平滑地制作动画。

以下是 html 代码示例：

<div class="links" id="qanzac100">
  Q ANZAC 100 <a class="first">+</a>
  <span class="hide"> brings our shared history to life and creates a renewed legacy for future generations.
  </span>
</div>

我已经制作了这样的 jQuery/JS 脚本循环：

// jQuery toggle for other sites buttons
$(document).ready(function()  //supposed to stop FOUC
  $(".hide").hide();

  $(".first").click(function() 

    if ($(this).html() == '+') 
      $(this).html('-')

     else if ($(this).html() == '-') 
      $(this).html('+')
    

    $(this).next('.hide').toggle("slide", "right", 500);
    // Animation complete.
  );
);

一切正常，但是当滑动动作动画时，它会滑出一个新的行（块），然后当动画完成时，它会“轻弹”回到我最初为它设置的内联样式。

为了更好的说明目的，这里是 JS Fiddle http://jsfiddle.net/coolwebs/dx8fd51f/10/

我只是想让它平滑地滑出并在同一行显示所有内容，如果它需要推到下一行，它会在达到最大宽度时执行。

这可以使用 jQuery 切换库吗？

【问题讨论】：

太快了，我根本看不到任何动画......

好的，所以放慢动画速度jsfiddle.net/coolwebs/dx8fd51f/15

我试过它似乎不想更新，即使你的新链接对我来说运行速度也没有变慢。 ///nvm 我修好了。

那么..如果文本太大，其他标签应该怎么办..？他们跳到下一行..？

真奇怪，试试这个链接到我的 GIT 分支的演示 rawgit.com/SLQ-web/Packery-Mockup-SLQ-Homepage/… - 是的，如果文本太大，其他元素只会被推到下一行

【参考方案1】：

问题在于您正在使用的 jQuery UI 库。

它实际上将您的span 元素替换为div 和ui-effects-wrapper 类，当然div 的标准显示类型是block。

如果您查看此js-fiddle，您就会明白为什么会这样。这是为了避免滑入的文本与已经存在的文本重叠。 （在那个小提琴中，我覆盖了ui-effects-wrapper 的显示样式。）

有几种方法可以解决这个问题，但最简单的方法是不依赖 UI 库，而只使用类切换来运行动画。

【讨论】：

感谢您指出这一点。我真的不想使用 UI 库（主要是因为它巨大！）但默认的切换动画使我的 div 元素在动画时“跳跃”。这很可能更多来自 slideToggle 功能，而不仅仅是“切换”。所以我将 JS 调用修改为： $(this).next('.hide').toggle("fast"); jsfiddle.net/coolwebs/dx8fd51f/28，它似乎工作正常。