Не выполнять функцию, когда у div есть активный класс - PullRequest
Новая
       33

Не выполнять функцию, когда у div есть активный класс

0 голосов
/ 29 апреля 2019

Я пытаюсь создать базовую анимацию из двух divs с функцией jQuery .toggle().

Основная концепция заключается в переключении видимости двух дополнительных элементов div с картой и контактной формой.

Я заставил все работать так, как хотел, но заметил ошибку.

Here is the link to the demo on Codepen - Ссылка

Чтобы увидеть ошибку, просто нажмите «Местоположение», затем «Связаться» и снова 'Location'.

Я думаю, что это можно исправить с помощью простой функции if else, но я не могу найти правильное решение, так как я не очень хорошо знаю JS.

Кто-нибудь, помогите мне, пожалуйста. Заранее спасибо!

1 Ответ

0 голосов
/ 29 апреля 2019

Как насчет чего-то вроде этого . По сути, просто следите за тем, отображаются ли форма и карта, и выполняйте анимацию только при необходимости. 

$(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();
});

});

...