如果'这种情况'和'那个案例'做'某事'其他'做'其他事'

Question

我正在尝试创建一个仅在768px分辨率下工作的onClick函数。该功能适用​​于其他分辨率，如992px及以上，但由于某种原因，该功能仍适用于分辨率768px本身。

以下是我的代码：

$(document).on('click','.active-tab', function(e){
  if ($(window).width() < 768) {
    if($(this).hasClass('active')) {
      $(this).removeClass("active");
      $(this).siblings().slideUp("fast");
    } else {
      $(this).addClass('active');
      $(this).parent().find('li').slideDown("fast");
    }
  }
  e.preventDefault();
});

.active-tabs {
  ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    list-style: none;
    li {
      display: none;
    }
    li:first-child {
      display: block;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabs">
  <ul>
    <li class="active-tab"><a href="">ALL</a></li>
    <li><a href="">TAB ONE</a></li>
    <li><a href="">TAB TWO</a></li>
    <li><a href="">TAB THREE</a></li>
    <li><a href="">TAB FOUR</a></li>
  </ul>
</div>

我正在努力实现这样的目标：

for when resolution is above 768

for when resolution is below 768

the onClick function whenever below 768

这是我错误的语法吗？或许我忘了什么？ 感谢帮助人员，谢谢。

Answer 1

你帖子中的主要问题似乎没有根据，但我确实注意到有一些逻辑错误会导致第一次点击无法正常工作。如果您需要参考证明您的支票有效，click here（因为您无法调整SO片段的大小）。

实现类似效果的另一种方式

我首先建议您修复锚标签。您可以将javascript:void(0)添加到其中，或只是添加#。

<li class="active-tab"><a href="javascript:void(0);">ALL</a></li>

如果您仅使用此代码切换可见性

但是，有一种方法可以进一步简化代码。您可以使用toggle来绕过您的一个if结构：

$(document).on('click','.active-tab', function(e){
  if ($(window).width() < 768) {
    $(this).siblings().toggle("fast");
  }
  e.preventDefault();
});

如果您需要更多选项

以下是使用toggleClass的代码版本。

if ($(this).hasClass('active')) {
  $(this).siblings().slideUp("fast");
} else {
  $(this).siblings().slideDown("fast");
}
$(this).toggleClass('active');

Answer 2

请使用此代码

HTML

<div class="tabs">
  <ul>
    <li><a class="active-tab" href="">ALL</a></li>
    <li><a href="">TAB ONE</a></li>
    <li><a href="">TAB TWO</a></li>
    <li><a href="">TAB THREE</a></li>
   <li><a href="">TAB FOUR</a></li>
  </ul>
</div>

css

    .tabs li{
        display:inline-block;
        vertical-align:top;
    }
    .tabs li a.active-tab{
        color:red;
    }   

    @media screen and (max-width: 767px) {
        .tabs li{
            display:block;
        }
        .tabs li:not(:first-child){
            display:none;
        }
    }

的jQuery

$('.tabs').on('click','a', function(e){
  if ($(window).width() < 768) {    
    $(this).parent('li').siblings().slideToggle("fast");
  } else {      
    $('.tabs a').removeClass('active-tab');
    $(this).addClass('active-tab');
  } 
  e.preventDefault();
});


$(window).on('load resize', function () {
    $('.tabs li').removeAttr('style');      
});