使用jQuery仅选择单击的li

我想显示单击的

ul

，而不是每个

ul

。

ul

中有类

幻灯片

如果有人能帮助我，我将不胜感激，因为我被困住了

下面是我的代码供您查看：

$（'.gallery li.slide-in'）。打开（“单击”，函数（）{
var ele=$（'.icon to change'）；
$（this.slideToggle（）；
if（元素hasClass（'fa-plus'））{
ele.removeClass（'fa-plus'））
.addClass（“fa-减”）；
}否则{
元素addClass（'fa-plus'）
.removeClass（'fa-减'）；
}
});
.row.gallery{
列表样式类型：无；
左边距：0px；
边缘顶部：50px；
填充：0；
宽度：100%；
背景：rgba（128128255,0.5）；
}
李安画廊{
显示：块；
颜色：#000；
填充：10px 20px；
文字装饰：无；
文本转换：大写；
字号：1em；
字体系列：“Bree Serif”，Serif；
}
.滑入{
列表样式类型：无；
显示：无；
}
.fa plus，
.fa减{
浮动：对；
位置：相对位置；
顶部：2个；
}
李娜画廊：悬停{
背景色：#8080ff；
颜色：白色；
}
李安画廊，
标题：悬停{
背景色：rgba（9,17,25,1）；
颜色：白色；
}

新文件



















我稍微更改了html+jQuery部分，下面是一个snipper来测试它：


//我在您的li上添加了一个类“激活幻灯片”
$（'.gallery li.activate slide'）。打开（“单击”，函数（）{
var ele=$（this.find（'.icon to change'）；
$（this.find（“.slide-in”）.slideToggle（）；
if（元素hasClass（'fa-plus'））{
ele.removeClass（'fa-plus'））
.addClass（“fa-减”）；
}否则{
元素addClass（'fa-plus'）
.removeClass（'fa-减'）；
}
});
.row.gallery{
列表样式类型：无；
左边距：0px；
边缘顶部：50px；
填充：0；
宽度：100%；
背景：rgba（128128255,0.5）；
}
李安画廊{
显示：块；
颜色：#000；
填充：10px 20px；
文字装饰：无；
文本转换：大写；
字号：1em；
字体系列：“Bree Serif”，Serif；
}
.滑入{
列表样式类型：无；
显示：无；
}
.fa加，.fa减{
浮动：对；
位置：相对位置；
顶部：2个；
}
李娜画廊：悬停{
背景色：#8080ff；
颜色：白色；
}
.gallery li a.标题，.gallery li a.标题：悬停{
背景色：rgba（9,17,25,1）；
颜色：白色；
}

新文件





















您应该试试这个

$('.gallery > li').on("click",function(){
            var ele = $('.icon-to-change');
              if($(this).children().children().hasClass('fa-plus')){
                $(this).next('.slide-in').slideToggle();
                ele.removeClass('fa-plus')
                   .addClass('fa-minus');
              }
              else{
                $(this).next('.slide-in').slideToggle();
                ele.addClass('fa-plus')
                   .removeClass('fa-minus');
              }
        })

您的代码应该如下所示

您的HTML不正确

您的事件应该绑定到.header类



$（文档）.ready（函数（）{
$（'.header'）。单击（函数（）{
var ele=$（this）.children（'.icon to change'）；
//$（this.slideToggle（）；
$（this）.parent（）.children（“ul”）.slideToggle（）；
if（元素hasClass（'fa-plus'））{
ele.removeClass（'fa-plus'）。addClass（'fa-plus'）；
}否则{
ele.addClass（'fa-plus'）。removeClass（'fa-plus'）；
}
});
});
.row.gallery{
列表样式类型：无；
左边距：0px；
边缘顶部：50px；
填充：0；
宽度：100%；
背景：rgba（128128255,0.5）；
}
李安画廊{
显示：块；
颜色：#000；
填充：10px 20px；
文字装饰：无；
文本转换：大写；
字号：1em；
字体系列：“Bree Serif”，Serif；
}
.滑入{
列表样式类型：无；
显示：无；
}
.fa plus，
.fa减{
浮动：对；
位置：相对位置；
顶部：2个；
}
李娜画廊：悬停{
背景色：#8080ff；
颜色：白色；
}
李安画廊，
标题：悬停{
背景色：rgba（9,17,25,1）；
颜色：白色；
}

新文件





















请按以下方式修改您的代码。
1） 更新jQuery
2） 移动。在其上方滑入


$（'.gallery li'）。单击（函数（）{
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
$（this.find（'.slide-in'）.slideUp（）；
}否则{
$（this）.sides（）.removeClass（'open'）.find（'.slide-in'）.slideUp（）；
$（this.addClass（'open'）；