当 div 激活 class 时不执行函数

Question

我正在尝试使用 jQuery .toggle() 函数构建两个 divs 的基本动画。

主要概念是通过地图和联系表单切换两个附加 div 的可见性。

我让一切都按我想要的方式运行，但发现了一个错误。

Here is the link to the demo on Codepen -- Link

To see the bug just hit 'Location' then 'Get in touch' and again 'Location'.

我认为可以通过简单的 if else 函数来修复它，但是我不太了解 JS，所以我无法想出正确的解决方案。

任何人，请帮助我。提前致谢！

Answer 1

this 这样的东西怎么样？基本上只是跟踪表格和地图是否显示，只在必要时才做动画。

$(document).ready(function() {

// toggle map visibility
$("#toggle-map").click(function() {
    $(".target-map").toggle('left');
});
// toggle contact form visibility
$("#toggle-form").click(function() {
    $(".target-form").toggle('left');
});

var showingMap = false
var showingForm = false

function animate() {
    var changeInLeft = !showingMap && !showingForm ? "0px" : "-245px"
    $(".left-part").stop().animate({ left: changeInLeft }, 100);
}

// hide one on click 
$(document).on("click", "#toggle-map", function(event) {
    $(".target-form").hide();
    event.preventDefault();
    if (showingForm) showingForm = !showingForm;
    showingMap = !showingMap;
    animate();
});

$(document).on("click", "#toggle-form", function(event) {
    $(".target-map").hide();
    event.preventDefault();
    showingForm = !showingForm;
    if (showingMap) showingMap = !showingMap;
    animate();
});

});

当 div 激活 class 时不执行函数

Don't execute the function when div has active class

javascript

jquery

toggle

slidetoggle