javascript - 使用 javascript 和 css 转换扩展 div

标签 javascript html css

我有一个包含一些文本的部分,当您单击它时,我想将其动画化。这是下面的 jsfiddle 链接,html 和 css 非常简单。谁能向我解释为什么它不起作用?

http://jsfiddle.net/jtKuZ/9/

我的 javascript 代码如下:

function show-hide(element)
{
    var classname = document.getElementById(element).className;
    if (classname == "hidden")
        document.getElementById(element).className = "visible";
    else
        document.getElementById(element).className = "hidden";
}

我的 HTML 中有这个:

<div id="container">
<div id="content" class="hidden" onclick="show-hide('content');">
Lorem ipsum dolor sit amet...
</div>
</div>

最佳答案

为此我更喜欢 jQuery:

它让你的生活更轻松:

$('#content').on('click', function() {
    $(this).toggleClass("visible");

    if($(this).is('.visible'))
        $(this).animate({left: 0}, 1000);
    else
        $(this).animate({left: '490px'}, 1000);
});

http://jsfiddle.net/Recode/jtKuZ/14/

关于javascript - 使用 javascript 和 css 转换扩展 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16850386/

相关文章:

javascript - 如何在登录页面中将鼠标指针自动放置在提交按钮上?

javascript - 类型错误 : enterPage is undefined in OnsenUI 2 React navigator

javascript - 在 IE 中禁用带有 'contentEditable' 标志的元素的自动 URL 检测

html - Jquery 工具提示错位

javascript - 响应式菜单在桌面上不起作用

php - 如何打开在div中解析的链接?

javascript - 动态进度条Javascript和HTML

css - 我可以用没有框架的 html 页面显示 html 页面吗?

html - Safari 标签上的 CSS 转换问题

jquery - 在悬停滑动面板上从右侧和 mouseout 滑回