javascript - 每次单击togle-slide时如何滑动div并显示不同的内容?
问题描述
每次单击工具滑动按钮时,我都会尝试在 div 之间切换。每次单击切换按钮时,另一个按钮也应隐藏/显示。
html代码:
<div id="divParticipants">
click 'on' to hide the button and show the second content
</div>
<div id="divPackage" style='display:none'>
click 'off' to hide the button and hide first content
</div>
<button type="button" id='add-new'>
another button
</button>
javascript代码:
$(function () {
$('#package-toogle').change(function () {
$('#divParticipants').hide("slide", { direction: "right" }, 400, function () {
$('#add-new').hide();
});
$('#divPackage').show("slide", { direction: "left" }, 400, function () {
$('#add-new').show();
});
})
});
我花了半个小时试图让它工作,但无法让它工作。如果您能展示如何做到这一点,我将不胜感激。这是jsfiddle链接。
解决方案
尝试使用切换。
$(function () {
$('#package-toogle').on('change', function () {
$('#divParticipants').toggle("slide", { direction: "right" }, 400, function () {
});
$('#divPackage').toggle("slide", { direction: "left" }, 400, function () {
});
$('#add-new').toggle();
})
});
推荐阅读
- java - 如何引用我的数据库或指向该特定 UID?
- javascript - 如何使用 nodejs 将 base64 编码图像转换为 TIFF/png/jpeg
- php - 在 PHP 数组中,如何根据数组值修改字符串键?
- arrays - 打字稿:使用父对象列表中的子对象
- html - 位置固定下拉菜单的 IE11 问题
- kotlin - Kotlin 中的类型安全没有按预期工作
- perl - 用perl修改二进制文件中的条目
- java - java.lang.NoClassDefFoundError:无法初始化类 org.apache.cxf.jaxrs.provider.ProviderFactory
- r - 在 dplyr 的 group_by 中有条件地忽略值
- java - 请求运行时权限时的 java.lang.StackOverflowError