我使用CSS和jQuery的组合在浏览器的右侧创建了一组选项卡,并且它几乎可以正常工作,但有一个缺陷。出现在右侧的图像供用户单击并使选项卡的其余部分滑动到视图中,只是“弹出”到应放置的位置而不是滑动,而实际内容则正确滑动。
我试过在tab-handle-container类上使用.animate和其他效果,但是没有成功。我在下面发布了我的HTML,jQuery和CSS代码,以提供您可以提供的任何提示。另外,我希望在IE8和9中进行这项工作,目前还不太在意其他浏览器。谢谢!
HTML和jQuery
<script>
$(document).ready(function(){
$(".content").hide();
$(".myhandle").click(function(){
$(".content", $(this).parents("li")).toggle('slide',{direction: "right"}, 1000);
});
});
</script>
<html>
<body>
<div class="Container">
<ul class="tab-list">
<li>
<div class="content">
<h3>Contact Information</h3>
<p>If you need technical assistance, please</p>
</div>
<div class="tab-handle-container">
<img class="myhandle" src="contacttab.bmp"></img>
</div>
</li>
<li>
<div class="content">
<h3>Some more stuff</h3>
<p>This will be where more content is displayed</p>
</div>
<div class="tab-handle-container">
<img class="myhandle" src="email.jpg"></img>
</div>
</li>
</ul>
的CSS
html {margin: 0px;}
.myhandle {
cursor: hand;
}
.container {
right: -210px;
width: 240px;
height: 240px;
}
.tab-handle-container {
margin: 0px;
border: 0px;
width: 40px;
float: left;
}
.content{
padding: 5px;
float: left;
width: 200px;
background-color: #ffffff;
}
最佳答案
在MrSlayer的帮助下使用.toggle
解决了此问题,将两个元素都放入了div,通过CSS关闭了滚动,然后使用了
$(document).ready(function(){
$(".myhandle").toggle(function(){
$(".slider", $(this).parents("li")).animate({right: "+=200"}, 700);
},
function() {
$(".slider", $(this).parents("li")).animate({right: "-=200"}, 700);
}
);
});
关于jquery - 无法获得惯用的jQuery标签以正确设置动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10623596/