click function Jquery Timing

click function Jquery Timing

本文关键字：Timing Jquery function click      更新时间：2023-09-26

我有一个问题，当我点击我的拇指单位它重新加载页面，它必须打开，但它是打开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').click(function(e) {
    e.preventDefault();
    $('.work-slider').css('left' , '-100%');
    $('.work-container').show();
  });
  $('.work-return').click(function(e) {
    e.preventDefault();
    $('.work-slider').css('left' , '0%');
    $('.work-container').hide(800);
  });

这可能是off base，但由于.thumb-unit是一个锚标记，我相信你必须防止默认事件是导航，并与一个空的href属性应该是重新加载页面。试试这个:

$('.thumb-unit').click(function(evt) {
    evt.preventDefault();
    $('.work-slider').css('left' , '-100%');
    $('.work-container').show();
});

由于.work-return是一个div，因此没有必要添加相同的代码片段，因为没有需要阻止的默认事件。

相关文章：