Javascript 选中单选按钮时如何向下滑动div

我有一个问题列表，每个问题都有三个可能的答案

它们是：

ok

、

fout

和

nvt

仅使用

fout

我想要一个向下滑动的div，可以在其中添加一些内容

基本上答案是：好的，错的，不适用的。当答案错误时，我希望能够在输入字段中添加错误的原因

因此，在这个答案下面，我需要一个div，只有在单击

fout

时才向下滑动，而在单击其他两个选项之一时再次向上滑动

我该怎么做

这是我目前的HTML：

好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t

单击单选框时使用Jquery切换，反之亦然。在Jquery中使用Append函数。然后找到父对象以查找要附加的子对象，然后可以添加所需的HTML内容

---

没有JS方面的专家，但是可以在调用.slideDown（）之前使用jQ将HTML添加到元素中

下面是一个如何做到这一点的示例。基本上

（1） 使用HTML数据属性为每个

输入

无线电响应存储一些文本（如果愿意，可以使用其他方法，但这是可行的）。单击按钮时，我们获取存储在此处的任何文本，并将其保存到变量中

（2） 然后，我们删除任何可能已经添加的

col-md-12

div（这允许您更改答案，而无需将响应div加倍）

（3） 然后我们构建要插入的

col-md-12

，从上面的步骤（1）中获得唯一的文本

（4） 最后，我们将新构造的div附加到类为

.row

请注意，我只提出了前两个“问题”，而且外观不稳定，但这应该会让您了解如何解决这一问题。

$（文档）。在（'click'，'id^=radio]'上，函数（）{
var userresp=this.value；
var ans=$（this.data（'more'）；
var ques=$（this）.closest（'.row'）；
$（ques）.find（'.col-md-12'）.slideUp（）.remove（）；
如果（userresp=='fout'）{
$（''+ans+''）.appendTo（ques.slideDown（）；
}
});
*{位置：相对；框大小：边框框；}
正文{宽度：80%；}
.col-md-12{宽度：95%；边框：1px纯绿色；显示：无；}

好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
示例2：如果希望div向后滑动，而不是向后跳转：
您可以将
回调
函数（内置）添加到jQuery
.slideUp（）
方法中。这是通过在运行
.remove（）
方法之前等待slideUp完成来实现的。以前，两者都是同时运行的，因此幻灯片不明显

更改此项：

$(ques).find('.col-md-12').slideUp().remove();

为此：

$(ques).find('.col-md-12').slideUp(400, function(){
   $(ques).find('.col-md-12').remove();
});


$（文档）。在（'click'，'id^=radio]'上，函数（）{
var userresp=this.value；
var ans=$（this.data（'more'）；
var ques=$（this）.closest（'.row'）；
/*如果div存在，则添加一个SlideUp*/
$（ques）.find（'.col-md-12'）.slideUp（400，function（）{
$（ques）.find（'.col-md-12'）.remove（）；
});
如果（userresp=='fout'）{
$（''+ans+''）.appendTo（ques.slideDown（）；
}
});
*{位置：相对；框大小：边框框；}
正文{宽度：80%；}
.col-md-12{宽度：95%；边框：1px纯绿色；显示：无；}

好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
好啊
福特
N.v.t
示例3

此示例演示如何根据
标记上的
data more
HTML属性中的文本，将不同的消息塞入外接程序DIV

*这是最初的答案，在我意识到您特别希望消息DIV仅在单击
fout
按钮时显示之前。但是，我想让您在一个更完整的示例中看到使用
data more
属性的效果，所以我重新构建了这个原始答案

比较这两个示例，您将看到javascript中的差异非常非常小*


$（文档）。在（'click'，'id^=radio]'上，函数（）{
var userresp=this.value；
var ans=$（this.data（'more'）；
var ques=$（this）.closest（'.row'）；
$（ques）.find（'.col-md-12'）.slideUp（）.remove（）；
$（''+ans+''）.appendTo（ques.slideDown（）；
});
*{位置：相对；框大小：边框框；}
正文{宽度：80%；}
.col-md-12{宽度：95%；边框：1px纯绿色；显示：无；}

好啊
福特
N.v.t