代码之家 › 专栏 › 技术社区 › Gervin Sean Miranda

如果“this case”和“that case”做“something”或“other something”

onclick if-statement jquery javascript

Gervin Sean Miranda · 技术社区 · 6 年前

我正在尝试创建一个onClick函数,它只能在768px的分辨率以下工作。该函数适用于其他分辨率,如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

这是我错的语法吗?或者我忘了什么? 谢谢你们的帮助,谢谢。

2 回复 | 直到 6 年前

Neil 6 年前

你帖子中的主要问题似乎没有根据,但我确实注意到有些逻辑错误会导致第一次点击无法正常工作。如果你需要证明你的支票有效的证明人, 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');

-1

Sunil Yadav 6 年前

请使用此代码

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');      
});