Javascript 单击某个项目时，查询切换打开所有div时出错？

我有一个示例代码

关于Html：

<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>

ABC
DEF
XYZ

和jquery：

    $('div[id^=item-][id$=-desc]').hide().before('<a href="#" class="see-more" id="toggle-desc">More</a>');

    $('a#toggle-desc').click(function (e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('see-more');
        if($this.hasClass('see-more')){
            $this.text('More');         
        } else {
            $this.text('Close');
        }
        $('div[id^=item-][id$=-desc]').slideToggle(200);
    });

$（'div[id^=item-][id$=-desc]'）。在（''）之前隐藏（）；
$（'a#toggle desc'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.toggleClass（'see-more'）；
if（$this.hasClass（'see-more'））{
$this.text（'More'）；
}否则{
$this.text（'Close'）；
}
$（'div[id^=item-][id$=-desc]'）。滑动切换（200）；
});

---

当我单击“更多”时，它将打开所有div（）。如何单击仅显示项目描述？

您必须仅针对已单击的

a

的下一个同级

div

$(this).next('div').slideToggle(200);

此外，元素的id必须是唯一的，因此对于动态添加的元素，请使用该类注册单击处理程序

$（'div[id^=item-][id$=-desc]'）。在（''）之前隐藏（）；
$（'.请参阅更多'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.toggleClass（'see-more'）；
$this.text（$this.hasClass（'see-more'）？'more'：'Close'）；
$（this）.next（'div[id^=item-][id$=-desc]'）。滑动切换（200）；
});

基础知识
DEF
XYZ

$（'div[id^=item-][id$=-desc]'）。在（''）之前隐藏（）；
$（'a#toggle desc'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.toggleClass（'see-more'）；
if（$this.hasClass（'see-more'））{
$this.text（'More'）；
}否则{
$this.text（'Close'）；
}
$this.next（）.slideToggle（200）；
});

$('div[id^=item-][id$=-desc]').hide().before('<a href="#" class="see-more" id="toggle-desc">More</a>');

 $('a#toggle-desc').click(function (e) {
     e.preventDefault();
     var $this = $(this);
     $this.toggleClass('see-more');
     if ($this.hasClass('see-more')) {
         $this.text('More');
     } else {
         $this.text('Close');
     }
     $this.next().slideToggle(200);
 });