隐藏javascript滑块的问题

issue with hiding javascript slider

本文关键字：问题 javascript 隐藏      更新时间：2023-09-26

过去几天我一直在开发javascript滑块，到目前为止，我一直在研究如何使用关闭按钮将div滑块从页面中滑出。。。我发现了一些我试图使其工作的代码，但在这样做的过程中非常不容易。以下是完整的代码，我在试图将div从屏幕上滑回的代码的两个部分旁边添加了注释。。

<script type="text/javascript">
$(function(){
    $(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '50.1%'}); //Bring the div from right to left with 200px padding from the screen
});
});
function closeRecord() { // this function
 $('#details').animate({right:-1000}, 500);
}
</script>

<div class="recordrow" id="row-1">
    <p>Matthew Gia </p>
    </div>
<div class="details" id="details-1">
   ... More details of the records
   <a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a> //this button
</div>
<div class="details" id="details-2">
   ... More details of the records
</div>

还有这个js小提琴

http://jsfiddle.net/matth4ck3r/aWMg6/2/

您的代码中存在范围问题，您可以删除onclick属性并尝试：

$('#bt-close').click(function(e){
    $('.details').animate({right: "-=1000"}, 500);
    e.preventDefault()
})

http://jsfiddle.net/aWMg6/10/

还要注意，标记中没有id为details的元素，您似乎希望通过类名来选择元素。

您也可以这样做，但它不像undefine的答案那样干净。http://jsfiddle.net/aWMg6/12/

相关文章：