单击播放列表时显示媒体播放器

Question

当前正在尝试让播放器仅在播放列表中的某个项目单击时显示在屏幕底部。我写了这段代码：

$(document).on("click", function(e){ 
if($(e.target).is(".playlistItem")){ 
    $(".playerHolder").show(); 
}else{ 
    $(".playerHolder").hide(); 
} 

}）;

我目前有playerHolder设置为显示：无。但我希望它切换到显示：单击playlistItem时弹性。有任何想法吗？

Answer 1

您可以切换显示/隐藏类或有两个单独的类。你也可以添加内联样式，但我相信交换类是'更好'的。

CSS

.playerHolder-hidden { 
    display: none; 
} 
.playerHolder-show { 
    display: flex; 
} 

jQuery的

$(document).on("click", function(e){ 
if($(e.target).is(".playlistItem")){ 
    $(".playerHolder").addClass("playerHolder-show").removeClass("playerHolder-hidden"); 
}else{ 
    $(".playerHolder").addClass("playerHolder-hidden").removeClass("playerHolder-show"); 
} 

编辑：
更新的jQuery从评论

$(document).on("click", function(e){ 
if($(e.target).is(".playlistItem")){ 
    $(".playerHolder").addClass("playerHolder-show").removeClass("playerHolder-hidden"); 
}