Question

首先，我所说的一切仅适用于我的网站的移动版本-https://wtstest1.weebly.com，因此在进行故障排除时，请使用移动视图。

第二，我提供了与该主题相关的特定JavaScript（Jquery）代码供您参考：

jQuery(window).load(function(){
  var wW = $(window).width();
  $(document).off('click','.wsite-menu-item');
  $(document).on('click','.wsite-menu-item', function(){
    var _this = $(this);
    var _href = _this.attr('href');
    var _top;
    if(wW > 992){
      _top = $(_href).offset().top - 64;
      $('body').removeClass('nav-open')
    }else{
      _top = $(_href).offset().top - 50;
      $('body').removeClass('nav-open')
      $('.boo_onepage').removeClass('show')
    }
    $('html,body').stop().animate({scrollTop:_top},500)
  })

当您在移动视图中加载我的网站时，您会在顶部看到一个带有一些选项的箭头，点击每个箭头可滚动到我网页的特定部分。尽管在选择选项后箭头并没有单独最小化，这很不方便，所以我添加了倒数第二行，您可以在代码中看到：

$('.boo_onepage').removeClass('show')

现在添加此行使箭头在选择选项时自行最小化

但这会导致另一个问题-我发布此内容的主要原因.........

现在，箭头在选择一个选项后会自动最小化，但是发生得太快了，在此过程中，它会跳过原来出现的active-tab / hover效果。通过将标签显示为黄色（不到1秒），然后滚动到所请求的部分，它可以帮助用户知道他们点击的位置。

有人可以在选择一个选项后仍然保持活动的tab / hover效果来调整jQuery代码以使箭头最小化。

我从一开始就尝试过-我尝试使用setTimeout(function()来延迟功能-$('.boo_onepage').removeClass('show') 1秒钟，但是效果不如预期。

（如果有人想看看添加那条线如何使箭头自己最小化，但是消除了悬停/活动选项效果，则可以在此处进行检查-https://wtstest.weebly.com）

Answer 1

我已经阅读了您的帖子...！您可以在下面遵循我的代码

// When click arrow navbar it's increase size follow 1s
$(document).on('click','.boo_onepage_toggle', function(){
  $('.boo_onepage_menu').css({'font-size':'20px','transition':'1s'})
})
// When choose one option the arrow will decrease size follow 1s
// The user when navigation to arrow It's screen point similar button for user understand "Click"
$(document).on('click','.wsite-menu-item', function(){
  $('.boo_onepage_menu').css({'font-size':'10px','cursor':'pointer','transition':'1s'})
  $('.boo_onepage').removeClass('show')
})
// Hover when user move to arrow
$('.boo_onepage_menu').mouseover(function(){
  $(this).css({'font-size':'20px','cursor':'pointer','transition':'1s'})
}).mouseout(function() {
  $(this).css({'font-size':'10px','cursor':'pointer','transition':'1s'})
})

祝你有美好的一天...！

有关调整/延迟功能时序的JavaScript帮助

1 个答案: