jQuery toggle显示隐藏默认内容

问题描述 投票:0回答:1

我有一个showhide toggle,在内容之间切换,如果menu a 被点击。

在点击功能被触发之前,内容会显示在 default div.

由于某些原因,如果你点击其中一个 a 标签的两次成功地切换了内容的开关。但是你会留下一个空白的屏幕

这是一个糟糕的用户体验。

如何避免这种情况,并确保在用户两次选择菜单项时显示默认内容?

$(document).ready(function() {
  var $show = $('.show');

  $('.menu a').on('click', function(e) {
    e.preventDefault();
    $show.not(this).stop().hide(450);
    $($(this).attr('href')).stop().toggle(450);
    $('.default').addClass('hidden');
  });


});
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <a href="#show-screen">Screen</a>
  <a href="#show-music">Music</a>
  <a href="#show-art">Art</a>
  <a href="#show-food">Food</a>
</div>

<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>

<div class="default">default content</div>

谢谢,谢谢

javascript jquery toggle show-hide
1个回答
1
投票

虽然我建议用一种完全不同的方法来处理这个问题,但为了让你的代码工作,我会这样做。https:/jsfiddle.net6cnt95ap1

$(document).ready(function() {
  var $show = $('.show');
  $('.menu a').on('click', function(e) {
    e.preventDefault();
    $show.not(this).stop().hide(450);
    $($(this).attr('href')).stop().toggle(450);
    $('.default').addClass('hidden');

  window.setTimeout(()=>{
        var showDefault = true, divs = $('.show');
     divs.each(function(){
       if($(this).css("display") !=='none'){
            showDefault = false;
            return false;
          }
    });
    if(showDefault){
          $('.default').removeClass('hidden');  
     }
  }, 500)

    });


  })
© www.soinside.com 2019 - 2024. All rights reserved.