Html JQuery->；新的span id单击功能没有响应

我试图用一个CSS转换来打开和关闭箭头，但它只在我点击箭头打开时起作用，而不是响应关闭时起作用

$（文档）.ready（函数（）{
$（'#openarrow'）。单击（函数（）{
var dsptmt=setTimeout（function（）{$（'#usernameid'）.css（'display'，'inline block'）；}，1100）；
$（'.chip'）。宽度（'170'）；
$（'.arrow'）.removeClass（'arright'）；
$（'.arrow'）.addClass（'arleft'）；
$（'openarrow'）.attr（'id'，'closearrow'）；
})
$（'#closearrow'）。单击（函数（）{
$（'.arrow'）.removeClass（'arleft'）；
$（'.arrow'）.addClass（'arright'）；
$（'#usernameid'）.css（'display'，'none'）；
$（'.chip'）。宽度（'100'）；
$（'#closearrow'）.attr（'id'，'openarrow'）；
});
});
.chip{
字体系列：“Abel”，无衬线；
显示：内联块；
填充：0 25px；
宽度：100px；
高度：50px；
字体大小：16px；
颜色：蓝色；
线高：50px；
边界半径：25px；
背景色：#f1f1；
过渡：宽度，2s；
}
#用户名{
显示：无；
}
.阿罗{
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充物：5px；
}
阿赖特先生{
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
阿列夫先生{
变换：旋转（135度）；
-webkit变换：旋转（135度）；
}

全名
这个问题是，应用事件处理程序时，不存在ID为
#closearrow
的元素。如果您想保留此范例，一个选项是使用事件冒泡来将
.chip
上的事件处理程序应用于
closearrow
元素，因为
.chip
将始终存在。见下文


$（文档）.ready（函数（）{
$（'.chip'）。在（'click'，'openarrow'，函数（）上{
var dsptmt=setTimeout（function（）{$（'#usernameid'）.css（'display'，'inline block'）；}，1100）；
$（'.chip'）。宽度（'170'）；
$（'.arrow'）.removeClass（'arright'）；
$（'.arrow'）.addClass（'arleft'）；
$（'openarrow'）.attr（'id'，'closearrow'）；
})
$（'.chip'）。在（'click'，'#closearrow'，函数（）上{
$（'.arrow'）.removeClass（'arleft'）；
$（'.arrow'）.addClass（'arright'）；
$（'#usernameid'）.css（'display'，'none'）；
$（'.chip'）。宽度（'100'）；
$（'#closearrow'）.attr（'id'，'openarrow'）；
});
});
.chip{
字体系列：“Abel”，无衬线；
显示：内联块；
填充：0 25px；
宽度：100px；
高度：50px；
字体大小：16px；
颜色：蓝色；
线高：50px；
边界半径：25px；
背景色：#f1f1；
过渡：宽度，2s；
}
#用户名{
显示：无；
}
.阿罗{
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充物：5px；
}
阿赖特先生{
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
阿列夫先生{
变换：旋转（135度）；
-webkit变换：旋转（135度）；
}

全名
这个问题是，应用事件处理程序时，不存在ID为
#closearrow
的元素。如果您想保留此范例，一个选项是使用事件冒泡来将
.chip
上的事件处理程序应用于
closearrow
元素，因为
.chip
将始终存在。见下文


$（文档）.ready（函数（）{
$（'.chip'）。在（'click'，'openarrow'，函数（）上{
var dsptmt=setTimeout（function（）{$（'#usernameid'）.css（'display'，'inline block'）；}，1100）；
$（'.chip'）。宽度（'170'）；
$（'.arrow'）.removeClass（'arright'）；
$（'.arrow'）.addClass（'arleft'）；
$（'openarrow'）.attr（'id'，'closearrow'）；
})
$（'.chip'）。在（'click'，'#closearrow'，函数（）上{
$（'.arrow'）.removeClass（'arleft'）；
$（'.arrow'）.addClass（'arright'）；
$（'#usernameid'）.css（'display'，'none'）；
$（'.chip'）。宽度（'100'）；
$（'#closearrow'）.attr（'id'，'openarrow'）；
});
});
.chip{
字体系列：“Abel”，无衬线；
显示：内联块；
填充：0 25px；
宽度：100px；
高度：50px；
字体大小：16px；
颜色：蓝色；
线高：50px；
边界半径：25px；
背景色：#f1f1；
过渡：宽度，2s；
}
#用户名{
显示：无；
}
.阿罗{
边框：纯黑；
边框宽度：0 3px 3px 0；
显示：内联块；
填充物：5px；
}
阿赖特先生{
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
阿列夫先生{
变换：旋转（135度）；
-webkit变换：旋转（135度）；
}

全名
太好了。。可爱的建议，感谢您确定我的问题n您的帮助不能停止超时使用：
clearTimeout（dsptmt）有什么建议吗？让它成为一个可运行的代码段？@fsd对于相同的代码，当我使用close arrow“$（'.chip'）。on（'click'，'#closearrow'，function（）{clearTimeout（dsptmt）；$（'arrow'）。removeClass（'arleft'）；$（'arrow'）。addClass（'arright'）；$（'usernameid'）。css（'display'，'none'）；$（.chip'）。width（'100'）$（“#closearrow”）.attr（'id'，'openarrow'）；}）`非常好的建议，感谢您确定我的问题，您的帮助不能停止超时使用：
clearTimeout（dsptmt）；
有任何建议吗？当我使用closearrow`$（'chip'）时，请将其设置为可运行的代码段？@fsdf用于相同的代码。on（'click'，'closearrow'，function（）{clearTimeout（dsptmt）；$（'.arrow'）。removeClass（'arleft'）；$（'arrow'）。addClass（'arright'）；$（'usernameid'）。css（'display'，'none'）；$（'.chip'）。width（'100'）；$（'closearrow'）。attr（'id'，'openarrow'）；}）；'FSDford thx for daedit@FSDford用于da编辑的thx