Javascript toggleClass-父同级选择器-问题

只是有几个问题，下面是我做的脚本

它在切换表单面板方面非常有效，但是当我开始与“活动”面板交互（即单击输入字段）时，活动类将从其父元素中移除，从而最小化面板

$(function () {
    $('.options-list li').click(function () {
        $(this).toggleClass('active');
        $(this).parent().children('li').not(this).removeClass('active');
    });
});

是否有一种方法可以将切换功能仅限于标题内容

我认为这是由于中的“Title”没有自己的包含元素，因此我将文本包装在一个元素中&这似乎解决了表单最小化问题，但是现在“active”类没有被删除（假设它现在是一个子选择器问题？？）

---

任何帮助都将不胜感激。

发生这种情况的原因是

li

中出现了大量事件。

input

上的click事件被冒泡到

li

元素，事件处理程序再次执行。要阻止这种情况发生，请在子元素事件处理程序上使用

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

添加以下代码

$('.active-panel').click(function (e) {
    e.stopPropagation(); // Stop event from bubbling up
});

$（函数（）{
$（'.options list li'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（this.parent（）.children（'li'）。而不是（this.removeClass（'active'）；
});
$（'.active panel'）。单击（函数（e）{
e、 停止传播（）；
});
});
。选项列表{
边框：1px实心#d5d6d7；
填充：0；
边缘底部：30px；
}
.选择权{
列表样式：无；
边框底部：1px实心#达达；
字体：16px/56px avenir A u 65regular！重要信息；
颜色：#333；
}
.options列表。option.active{
颜色：#004ebc；
}
.options列表.option.active:之前{
背景色：#004ebc！重要；
边框：5px实心#83ace0！重要；
}
.选项列表。选项：在{
内容：“；
背景色：#fff；
边界半径：16px；
边框：5px实心#004ebc；
高度：18px；
利润率：0.10px；
宽度：18px；
位置：相对位置；
顶部：3px；
框大小：边框框；
显示：内联块；
}
.小组{
身高：0；
溢出：隐藏；
背景#f9f9f9；
边框顶部：1px实心#d5d6d7；
过渡：所有0.5s线性；
过渡：高度0.25s缓进缓出；
/*可见性：隐藏*/
/*不透明度：0*/
/*过渡：可见性0，不透明度0.5线性*/
}
.option.active>.panel{
/*能见度：可见*/
/*不透明度：1*/
身高：100%；
填充：25px 10px；
}


表单字段1
子字段
子字段
子字段

表单字段2

表单字段3

HTML是相同的

JQuery

$(function() {
    $('.options-list li').click(function(){
        $(this).closest('.options-list').find('.active').removeClass('active');
        $(this).addClass('active');
    });
});

这里有一个小把戏：
我将添加以下代码作为处理程序中的第一个语句，因此只有在单击
元素的直接子元素（
li
）时，它才会继续：

$('.options-list li').click(function(e){
    if (!$(e.target).parent().is('.options-list')) {
        return;
    }
    ...

这是最新版本。
将代码更改为以下内容

$(function() {
    $('.options-list li').click(function(e){
        if (e.target === this) {
           $(this).toggleClass('active');
           $(this).parent().children('li').not(this).removeClass('active');
        }
    });
}); 

这是因为，您已将click事件添加到父级，因此即使单击其子级，也会触发该事件。因此，需要验证以确认它是父元素
您可能希望防止面板上的单击事件：

JavaScript

$('.options-list li .panel').click(function(evt){
    evt.preventDefault();
    return false;
});

这是您硬编码到特定元素的内容。如果元素在将来发生更改，并且类保持不变，则它的功能不正确是，但处理程序本身在原始代码中已处于
li
状态。但是我修改了代码来检查父类。是的，但是如果它有一个子类
li
，并且触发了一个click事件，那么它就出错了，这是另一回事。我刚刚更新了代码以检查父类。当然，如果它们被嵌套，它将不起作用。太好了！我不知道冒泡的问题。非常感谢你的帮助