javascript - 单击幻灯片内的 span 元素时防止 slider 切换幻灯片

Question

我在设置幻灯片时遇到了一些问题。我有它，以便在单击时当前幻灯片淡入下一张幻灯片。但是，有一个 span 元素，当单击该元素时，应该切换说明，同时停留在同一张幻灯片上，而不是跳到下一张，这就是它现在所做的，如下面的 fiddle 所示。单击详细信息 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;
}

fiddle :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");
});