Question

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

主要概念是使用地图和联系方式来切换另外两个div的可见性。

我按需要使所有工作正常进行，但发现一个错误。

Here is the link to the demo on Codepen-Link

要查看该错误，只需依次单击“位置”，“保持联系” “位置”。

我认为可以使用简单的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具有活动类时不要执行该函数

1 个答案: