时间戳

首页 > 解决方案 > jQuery toggleClass() 第一次后不切换类

javascript - jQuery toggleClass() 第一次后不切换类

问题描述

请忽略星号下方的内容。我添加了一个小提琴，因为我提供的片段不是很有用，然后我第一次发布了这个。

小提琴：https ://jsfiddle.net/erobertwald/gc0fod1b/57/

当我单击“菜单 1”时，模式出现，内容也出现。当我单击面板周围任意位置的模态时，模态消失了，我假设嵌套内容也消失了，因为当我再次单击“菜单 1”时，模态出现但嵌套内容没有。（不知道为什么，但在小提琴中，'X'（关闭）按钮目前不起作用。） - 编辑：如果我有正确的 ID 会有所帮助！）

试图找出导致问题的原因。

************************* 原帖 *********************** *******

我已使用以下内容将这些事件添加到元素中：

$(document).on('click', '#site-header > div:nth-child(1)', toggleGalleriesModal);
$(document).on('click', '#modal-close-button', toggleModal);
$(document).on('click', '#modal-backdrop', toggleModal);

每次都会触发此功能：

function toggleGalleriesModal(){
    var content = $('<div id="galleries-modal-content">');
    toggleModal('Galleries', content);
}

在 toggleModal() 函数中，我切换了模态本身的可见性，然后将内容嵌套在其中：

function toggleModal(label, content){
    window.event.stopPropagation();
    if(content != null) currentModalContent = content;
    currentModalContent.toggleClass('active');
    $('#modal').toggleClass('visible');
}

当我点击#site-header > div:nth-child(1)元素时，模态框出现了，内容也出现了。当我单击#modal-close-button或#modal-backdrop模态消失时，我假设嵌套内容也消失了，因为当我#site-header > div:nth-child(1)再次单击时，模态出现但嵌套内容没有。

真的被这里难住了。我一直在追寻这个问题并在网上寻找，但还没有想出或找到解决方案。

标签： javascriptjquery

解决方案

我找到了。这是那些直视我的事情的案例之一......

在 JS 中，我有这个：

   var content = $('<div id="galleries-modal-content">');
   if ($('#galleries-modal-content').length == 0) {
       // code to create the galleries-modal-content
   }

每次都创建了元素，并且大吃一惊：每次都清除了它的内容。

所以我把它改成了：

var content;
if($('#galleries-modal-content').length == 0){
    content = $('<div id="galleries-modal-content">');
    // code to create the galleries-modal-content
}

并添加了一个else：

}
    // code to create the galleries-modal-content
}else{
    content = $('#galleries-modal-content');
}

那成功了。

推荐阅读