Question

所以我试过这个https://jsfiddle.net/e1b88ktf/ 我想在单击主文本时应用下滑效果。并且当在主文本上再次单击时，隐藏文本也必须返回。

＆＃13;

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

＆＃13;

div.hide { 
display:none;}
div.show {
  
}

＆＃13;

<a onclick="showText('text1','text2')" href="javascript:void(0);">main-text</a>

<div id="text1" class="hide">
hidden text
</div>

＆＃13;

修改
感谢你的帮助。
文本显示为淡入效果，但背景颜色的div不显示。如何使背景颜色与文本一起淡出。
请参阅更新 Fiddle.

Answer 1

您可以使用jquery实现此目的：

$("#text1").slideToggle().toggleClass("show hide");

JSFiddle

修改而且你不必在div中添加/删除类。以下内容也适用。

$("#text1").slideToggle();

JSFiddle

对于淡入淡出效果，请使用.fadeToggle();

Answer 2

检查此解决方案 -

function showText(text)
{
  $(text).animate({opacity: 'toggle'}, 800); 
}

div.hide { 
        display:none;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <a onclick="showText('#text1')" href="javascript:void(0);">text</a>
<div id="text1" class="hide">
hidden text
</div>

<p><a onclick="showText('#text2')" href="javascript:void(0);">text2</a>
<div id="text2" class="hide">
hidden text 2
</div>

Answer 3

您可以使用jQuery toggle（）方法执行此操作。

HTML ：

<div class="toggle">text</div>
<div id="text1">
  hidden text
</div>

JS ：

$(document).ready(function(){
    $(".toggle").click(function(){
        $("#text1").toggle(1000);
    });
});

这是 fiddle 。

<强>更新

对于多次切换，请尝试以下代码：

<强> HTML

<div class="toggle">
  text1
  <div class="hide">
    hidden text1
  </div>
</div>
<div class="toggle">
  text2
  <div class="hide">
    hidden text2
  </div>
</div>

<强> JS

$(document).ready(function(){
    $(".toggle").click(function(){
       $(this).find(".hide").toggle(1000);
    });
});

以下是多次切换的小提琴： Fiddle

Answer 4

使用此HTML代码：）

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <style>
   div.hide { display: none; }
   div.show { }
  </style>
  <script>
    function showText()
      {
       $('#text1').slideToggle();
      }
 </script>
 </head>

 <body>
  <a onclick="showText('text1','text2')" href="javascript:void(0);">text</a>
  <div id="text1" class="hide"> hidden text </div>
 </body>
 </html>

使用？

4 个答案: