Question

我的标题右侧有以下菜单：

<ul class="right-menu">
  <li class="dg-button">
    <a href="#diagram-popup" class="diagram-btn" data-effect="mfp-zoom-out">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/barrel-slim.png"
        width="25" height="30" alt="Oil production">
    </a>
  </li>
  <li class="mnr-header-button">
    <a href="https://www.mnronline.com/" target="_blank">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/mnr-logo.png"
        width="125" height="24" alt="MNR Portal">
    </a>
  </li>
  <li class="slant-menu-item header-social">
    <a href="https://twitter.com/mnrkurdistan?lang=en-gb/" target="_blank">
      <i class="icon ion-social-twitter"></i>
    </a>
  </li>
  <li class="slant-menu-item header-social">
    <a href="https://www.facebook.com/MNRKurdistan/" target="_blank">
      <i class="icon ion-social-facebook"></i>
     </a>
  </li>
  <li class="slant-menu-item header-social">
    <a href="https://www.youtube.com/playlist?list=PLZ_WWHnSxBEqcQRsaVE8hreHivZbh2bjZ" target="_blank">
      <i class="icon ion-social-youtube" target="_blank"></i>
    </a>
  </li>
  <li class="slant-menu-item header-social">
    <a href="#contact-popup" class="contact-btn" data-effect="mfp-zoom-out">
      <i class="icon ion-email"></i>
        </a>
  </li>
  <li class="header-social-trigger">
    <a>
      <i class="icon ion-android-share-alt" target="_blank"></i>
    </a>
  </li>
</ul>

隐藏的css位在具有一定宽度的屏幕上显示此菜单的某些项目：

.header-social-trigger {
  display: none!important;
}

@media (min-width: 1024px) and (max-width: 1400px) {
  .header-social-trigger {
    display: table-cell!important;
    background-color: #e0771a!important;
    border-left: 0!important;
  }

  .header-social-trigger:hover {
    background-color: #f1811e!important;
  }

  .header-social {
    display: none!important;
  }
}

最终控制其中一些项目可见性的jQuery：

jQuery.fn.clickToggle = function (a, b) {
  function cb() {
    [b, a][this._tog ^= 1].call(this);
  }
  return this.on("click", cb);
};

$(".header-social-trigger").clickToggle(function () {
  $('.header-social').css("cssText", "display: table-cell!important");
  $('.dg-button, .mnr-header-button').css("cssText", "display: none");
  $('.header-social-trigger .icon').removeClass("ion-android-share-alt");
  $('.header-social-trigger .icon').addClass("ion-close");
}, function () {
  $('.header-social').css("cssText", "display: none");
  $('.dg-button, .mnr-header-button').css("cssText", "display: table-cell");
  $('.header-social-trigger .icon').removeClass("ion-close");
  $('.header-social-trigger .icon').addClass("ion-android-share-alt");
});

当我将窗口调整到1024到1400之间的宽度时，它按预期工作，有些项目显示而其他项目隐藏但是当我将其调整为更大的宽度时，所有这些项目都应该显示，但它们不会显示。我想我在这里尝试实现的是忽略当窗口调整为更大宽度时切换这些元素的jQuery。任何帮助将不胜感激。

忽略大屏幕上的切换

0 个答案: