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

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

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

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

Here is the link to the demo on Codepen -- Связь

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
47
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

});

Большое спасибо!

Ruslan Anisimov 29.04.2019 14:06

Другие вопросы по теме