點擊不發射的CSS動畫元素

我有一個綠色的小棒contactPull絕對位於div box-left的右側。我想在點擊contactPull時切換box-left班。爲此，我按原樣附上代碼。當我點擊contactPull時，沒有任何反應，並且控制檯日誌未打印。我試圖與其他幾個元素一樣，它工作得很好。 我不明白爲什麼只有contactPull不會回答我的點擊事件。點擊不發射的CSS動畫元素

該腳本在最後，這可能是我有什麼地方出錯的地方。您可以在腳本之後查看UI。

編輯：我認爲我的動畫導致JQuery不被切換。看來jQuery只有在css動畫開始後纔會被調用。糾正我，如果我錯了。請參閱CSS以獲取更新。

CSS：

.arrowRight { 
    margin-top: 175px; 
    width: 0; 
    height: 0; 
    margin-left: -10px; 
    border-top:  15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 15px solid #D1F486; 
} 
.box-left { 
    float: left; 
    width: 440px; 
    height: 352px; 
    border-right: solid 1px #D1F486; 
    border-top:  solid 1px #D1F486; 
    border-bottom: solid 1px #D1F486; 
    border-left: solid 4px #D1F486; 
    padding: 10px; 
    background-color: whitesmoke; 
    color: gray; 
} 
.contactPull { 
    position: absolute; 
    margin-left: 460px; 
    float: right; 
    height: 373px; 
    width: 5px; 
    background-color: #D1F486; 
    cursor: pointer; 
} 
.contactPull:active + .box-left { 
    width: 0; 
    opacity: 0; 
} 
.contactPull:active { 
    margin-left: 0; 
} 
.contactPull:active .arrowRight{ 
    border-left: 15px solid #D1F486; 
    border-right: none; 
    margin-left: 0; 
}

HTML：

<div class="contactPull"><div class="arrowRight"></div></div> 
<div class="shown box-left"> 
    <!-- some unimportant stuff --> 
</div>

JS：

$(function() 
{ 
    $('.contactPull').click(function(e) 
    { 
     e.preventDefault(); 
     $('.box-left').toggleClass("shown hidden"); 
     console.log("this is the click"); 
    }); 
});

enter image description here

來源

2014-04-19 Francis.Beauchamp

工作正常 - HTTP：/ /jsfiddle.net/Hn5Yn/。 – lifetimes

提示 - 使用開發者控制檯，你會看到明顯的錯誤 –

另外，作爲一個附註，你的英語會更好，因爲'請指出你的目標，期限和預算。我會在24小時內回覆您，我們可以隨時討論細節.' –

您還沒有關閉準備功能...

$(function() { 
    $('.contactPull').click(function(e) { 
    e.preventDefault(); 
    $('.box-left').toggleClass("shown hidden"); 
    console.log("this is the click"); 
    }); 
}); <--- missing

來源

2014-04-19 16:39:15

複製粘貼錯誤，它在代碼 –

@ Francis.Beauchamp然後代碼工作正常... http://jsfiddle.net/tilwinjoy/SMqu5/ –

我結束了一個新的.active類取代:active CSS選擇器，像這樣：

CSS：

.contactPull.active + .box-left { 
    width: 0; 
    opacity: 0; 
} 
.contactPull.active { 
    margin-left: 0; 
} 
.contactPull.active .arrowRight{ 
    border-left: 15px solid #D1F486; 
    border-right: none; 
    margin-left: 0; 
}

JS：

$(function() { 
    $('.contactPull').click(function(e) { 
     e.preventDefault(); 
     $(".contactPull").toggleClass("shown active"); 
     console.log("this is the click"); 
    }); 
});

來源

2014-04-19 18:09:05

點擊不發射的CSS動畫元素

回答

相關問題