Question

我有以下标记

<div id="contact-buttons-bar" class="slide-on-scroll" data-top="250px" style="left: 0px;">
<button class="contact-button-link show-hide-contact-bar" style="left: 0px;">
<a class="contact-button-link cb-ancor facebook" target="_blank" title="Follow on Facebook" href="https://www.facebook.com/" style="left: 0px;">
<a class="contact-button-link cb-ancor linkedin" target="_blank" title="Visit on LinkedIn" href="https://www.linkedin.com/" style="left: 0px;">
<a class="contact-button-link cb-ancor twitter" target="_blank" title="Follow on Twitter" href="https://www.twitter.com" style="left: 0px;">
<a class="contact-button-link cb-ancor youtube" target="_blank" title="Follow us on YouTube" href="https://www.youtube.com" style="left: 0px;">
</div>

在show-hide-contact-bar按钮的点击事件中，我通过切换班级anchor隐藏所有cb.hidden标签。该功能如下：

$('body').on('click', '.show-hide-contact-bar', function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $('.show-hide-contact-bar').find('.fa').toggleClass('fa-angle-right fa-angle-left');
    oContainer.find('.cb-ancor').toggleClass('cb-hidden');
  });

哪个有效。

现在我想要实现的是，如果屏幕尺寸小于768我想要隐藏所有锚标签以开始使用并且仅在点击事件上显示。我试过了

var width = $(window).width()
if (width < 768) {
  $('.show-hide-contact-bar').find('.fa').removeClass('fa-angle-left').addClass('fa-angle-right');
  $('.show-hide-contact-bar').find('.cb-ancor').toggleClass('cb-hidden');
}

但它似乎不起作用。社交栏并没有隐藏起来。

最初，我将div设为动画：

setTimeout(function(){
    $('#contact-buttons-bar').animate({ left : 0 });
}, 200);

如@ edisoni.1337所述，我应该使用toggle()。我尝试使用它，但锚标签的样式非常奇怪：

Answer 1

您可以使用仅限css的媒体查询。

@media (max-width: 768px) {
    .cb-ancor {
        display:none;
    }
}

此处您还有一个更新的jsfiddle用于按钮点击修复我使用了jquery的.toggle()，因此它可以为你节省大量的工作。在这里，您有来自w3schools page的帖子，以便您可以更好地了解其工作原理

在较小的屏幕上隐藏/显示锚标记

1 个答案: