Question

我在幻灯片设置方面遇到了一些麻烦。我有它，以便当点击时当前幻灯片淡入下一张幻灯片。但是，有一个span元素，当点击时，应该在停留在同一张幻灯片上时切换描述，而不是跳到下一个，这就是它现在所做的，如下面的小提琴所示。如何在单击详细信息span元素时保持幻灯片不变？

HTML

<section class="slider">
    <div>slide1<span class="details">details [+]<span class="details-desc">this is the description.</span></span></div>
    <div>slide2<span class="details">details [+]<span class="details-desc">this is the description.</span></span></div>
    <div>slide3<span class="details">details [+]<span class="details-desc">this is the description.</span></span></div>
    <div>slide4<span class="details">details [+]<span class="details-desc">this is the description.</span></span></div>
</section>

JS

var $slider = $(".slider").slick({
    fade: true,
    focusOnSelect: true
})

$slider.find(".slick-slide").on("click", function(){
   $slider.slick("slickNext");
});

$("span.details").click(function(){
    $("span.details-desc").toggle("slow");
});

CSS

.slick-slide {
    background: skyblue;
    color: white;
    padding: 100px 30px;
    position: relative;
    font-size: 30px;
    font-family: "Arial";

}

.slick-slide:nth-child(1),
.slick-slide:nth-child(3),
.slick-slide:nth-child(5),
.slick-slide:nth-child(7),
.slick-slide:nth-child(9),
.slick-slide:nth-child(11) {
     background: teal;
}

span.details {
    bottom: 10px;
    cursor: pointer;
    display: block;
    font-size: 10px;
    position: absolute;
    right: 10px;
}
span.details-desc {
    display: none;
}

小提琴：http://jsfiddle.net/ch72te2f/2/

Answer 1

stopPropagation完成它。请找到下面的jsfiddle链接。

http://jsfiddle.net/ramanathanMuthuraman/txtfrag3/1/

$("span.details").click(function(e){
     e.stopPropagation();
    $("span.details-desc").toggle("slow");
});

Answer 2

Fiddle Demo

试试这个

$("span.details").on("click",function(){
    $("span.details-desc").toggle("slow");
    return false;
});

Answer 3

Fiddle demo

无需额外的点击事件监听器进行导航。您可以在光滑的设置中附加它

var $slider = $(".slider").slick({
    fade: true,
    focusOnSelect: true,
    autoplay:false,
    arrows:true,
    nextArrow: "div.slick-slide"

});

$("span.details").on("click",function(e){
    e.stopPropagation();
    $(this).find("span.details-desc").toggle("slow");   
});

单击幻灯片中的span元素时，防止滑块切换幻灯片

3 个答案: