滑动窗体无法正常工作？

1）我需要“开放面板”和“关闭面板”工作，但它不能正常工作滑动窗体无法正常工作？

2）代码位于下面的链接。

3）请检查该链接就可以正常

http://jsfiddle.net/vamsivelaga/2jgL44c5/

function slide_open(){ 
    var a=document.getElementById("strip"); 
    a.setAttribute("onClick","close_panel()"); 
    close_panel(); 
    } 
function open_panel(){ 
    var right_position= 0; 
    var slide_form=document.getElementById('contact_form'); 
    if(parseInt(slide_form.style.right) < right_position){ 
     slide_form.style.right=parseInt(slide_form.style.right) + 2 + "px"; 
     setTimeout(open_panel(), 1); 
     } 
    slide_open(); 
    } 
function slide_close(){ 
    var a=document.getElementById('strip'); 
    a.setAttribute("onClick", "open_panel"); 
    open_panel(); 
    } 
function close_panel(){ 
    var right_position= -200; 
    var slide_form=document.getElementById('contact_form'); 
    if(parseInt(slide_form.style.right) > right_position){ 
     slide_form.style.right=parseInt(slide_form.style.right) - 2 + "px"; 
     setTimeout(close_panel(), 1); 
     } 
    slide_close(); 
    }

来源

2014-12-19 Vamsi Velaga

你尝试看看在控制台中抛出的错误吗？看看[addEventListener]（http://mdn.beonex.com/en/DOM/element.addEventListener.html）是如何工作的 – charlietfl 2014-12-19 07:54:22

这可能是因为您使用onClick将函数绑定到div而不是addEventListener 。 – Chrillewoodz 2014-12-19 07:56:19

对我来说，你有一些无限循环。为什么'slide_close（）'执行'slide_open（）'，反之亦然？ – ostrgard 2014-12-19 09:18:03

理解我建议一个更简单的解决方案。总是尝试在CSS文件中完成所有CSS样式，并通过在元素上应用和删除类来控制不同的状态。像这样：

var strip = document.getElementById('strip'); 
var slide_form=document.getElementById('contact_form'); 

strip.addEventListener('click',function(){ 
    if (slide_form.classList.contains('open')) 
     slide_form.className = slide_form.className.replace(' open', ''); 
    else 
     slide_form.className = slide_form.className + ' open'; 
});

Here's a fiddle。

来源

2014-12-19 09:28:07 ostrgard

值得一提的是，slide_form.className =='open'只有在'open'是元素上唯一的类时才有效，如果你有其他类的样式你需要一个子字符串/正则表达式匹配 – atmd 2014-12-19 09:32:31

即类名返回一个包含所有类的单个字符串 – atmd 2014-12-19 09:32:50

正确。在处理这样的类时，我通常会使用jQuery。我已经更新了答案，以考虑到这一点。 – ostrgard 2014-12-19 10:05:32

滑动窗体无法正常工作？

回答

相关问题