滑動窗體無法正常工作？

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

滑動窗體無法正常工作？

回答

相關問題