我有一个问题,当我单击拇指单位时,它会重新加载它必须打开的页面,但它会打开0.5秒,然后拇指单位再次返回,这是怎么回事?
$( document ).ready(function() {
workSlider();
});
function workSlider() {
$('.thumb-unit').click(function() {
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function() {
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
}
这是我的html,它应该显示工作容器
<section class="alt-section section-work">
<div class="work-slider">
<div class="thumb-wrap">
<div class="thumb-container">
{% for project in site.data.settings.projects %}
<a href="" class="thumb-unit" style="background-image: url(/assets/img/work/{{project.folder}}/thumb.jpg);">
<div class="thumb-overlay">
<strong>{{ project.name }}</strong>
<div class="zoom-icon"></div>
</div>
</a>
{% endfor %}
</div>
</div>
<div class="work-wrap">
<div class="work-container">
<div class="work-return">{% include icons/icon-back.html %}</div>
<h4 color="black">Hey dude</h4>
<div style="width: 600px; height: 500px; background: #ccc;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Y9dhSgnRl0s" frameborder="0" allowfullscreen></iframe>
</div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
</div>
</div>
</div>
</section>
最佳答案
这可能没有根据,但是由于.thumb-unit
是锚标记,我认为您必须防止默认事件导航,并且应使用空的href
属性重新加载页面。尝试这个:
$('.thumb-unit').click(function(evt) {
evt.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
由于
.work-return
是div,因此没有必要向其中添加相同的代码段,因为没有需要阻止的默认事件。关于javascript - 点击功能Jquery Timing,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30304107/