Jquery 切换UL内容和更新文本

我有一个切换UL内容的代码：

jQuery（文档）.ready（函数（）{
jQuery（“ul.项目选项”）。单击（函数（evt）{
如果（evt.target.tagName！=“UL”）
返回；
jQuery（“li”，this）.slideToggle（500）；
});
});
.item选项li{
显示：无；
}


显示
列表项


显示
列表项


显示
列表项
您可以尝试以下代码-
在UL中获取html，然后根据当前值替换文本并将html放回


jQuery（文档）.ready（函数（）{
jQuery（“ul.项目选项”）。单击（函数（evt）{
如果（evt.target.tagName！=“UL”）
返回；
var html=jQuery（this.html（）；
if（html.indexOf（'show'）>=0）{
jQuery（this.html（html.replace（'show'，'hide'））；
}否则{
jQuery（this.html（html.replace（'hide'，'show'））；
}
jQuery（“li”，this）.slideToggle（500）；
});
});
.item选项li{
显示：无；
}


显示
列表项
您可以尝试以下代码-
在UL中获取html，然后根据当前值替换文本并将html放回


jQuery（文档）.ready（函数（）{
jQuery（“ul.项目选项”）。单击（函数（evt）{
如果（evt.target.tagName！=“UL”）
返回；
var html=jQuery（this.html（）；
if（html.indexOf（'show'）>=0）{
jQuery（this.html（html.replace（'show'，'hide'））；
}否则{
jQuery（this.html（html.replace（'hide'，'show'））；
}
jQuery（“li”，this）.slideToggle（500）；
});
});
.item选项li{
显示：无；
}


显示
列表项
首先请注意，您的HTML是无效的。不能将文本节点作为
ul
的子节点。要解决此问题，您可以将
show
文本从
ul
移动到它自己的元素中。在下面的示例中，我使用了
p
，但任何其他方法都可以

从那里，您可以将一个
click
事件处理程序附加到该元素，该元素调用相关
li
元素上的
slideToggle（）
，然后根据其当前设置更新所单击元素的
text（）
。试试这个：


jQuery（函数（$）{
$（“.toggle”）.on（'click'，function（）{
$（'ul li'）.stop（）.slideToggle（500）；
$（this）.text（（i，t）=>t=='show'？'hide'：'show'）；
});
});
.item选项li{
显示：无；
}

显示

列表项
首先请注意，您的HTML是无效的。不能将文本节点作为
ul
的子节点。要解决此问题，您可以将
show
文本从
ul
移动到它自己的元素中。在下面的示例中，我使用了
p
，但任何其他方法都可以

从那里，您可以将一个
click
事件处理程序附加到该元素，该元素调用相关
li
元素上的
slideToggle（）
，然后根据其当前设置更新所单击元素的
text（）
。试试这个：


jQuery（函数（$）{
$（“.toggle”）.on（'click'，function（）{
$（'ul li'）.stop（）.slideToggle（500）；
$（this）.text（（i，t）=>t=='show'？'hide'：'show'）；
});
});
.item选项li{
显示：无；
}

显示

列表项
用
span
之类的东西包装您的
show
文本，然后切换文本，或者将其从
ul
中移出。用
span
之类的东西包装您的
show
文本，然后切换文本，或者将其从
ul
中移出。不幸的是，我认为这行不通。我有多个.item选项ul元素（在最初的问题中忘了提到这一点），因此这样做会导致每次单击.toggle段落时所有元素都会切换。在这种情况下，请使用
$（this）.next（'ul'）.find（'li'）.stop（）.slideToggle（500）。在这两种情况下，你的HTML都需要更改。幸运的是，我认为这不起作用。我有多个.item选项ul元素（在最初的问题中忘了提到这一点），因此这样做会导致每次单击.toggle段落时所有元素都会切换。在这种情况下，请使用
$（this）.next（'ul'）.find（'li'）.stop（）.slideToggle（500）。无论哪种情况，您的HTML都需要更改