Question

我希望设备忽略菜单上的特定功能。菜单是垂直的，具有手风琴特性，子菜单在导航页面时保持打开状态。

当在设备上查看时，菜单位于页面顶部并且较小。我需要它做的是当单击该项目时，菜单再次关闭，因此菜单不覆盖内容。继续脚本保持打开，我想我正在寻找一个if（设备）忽略这一行......

<script type="text/javascript">

$(function () {
 $("ul.menu-main > li").hover(function () {
    //Don't do this again if the same menu is hovered.
    if (!$(this).hasClass('selected')) {
        //Ensure any open sub-menu is closed.
        $("li.selected").children("ul").stop(true, true).slideUp(1000);
        $("li.selected").removeClass('selected');
        //Open sub-menu
        $(this).addClass('selected');
        $(this).children("ul").slideDown(1000);

    }
 });
        //Keep sub-menu open when navigating pages.
    if($('.active.parent > ul').length > 0) {
        $('.active.parent > ul').show();
    }
 });
 </script>

如果正在使用设备，我需要忽略它。

if($('.active.parent > ul').length > 0) {
        $('.active.parent > ul').show();

希望有意义吗？！

Answer 1

听起来很像你正在构建一个响应式网站。您可以使用matchMedia()和if-else语句为不同的媒体查询执行不同的函数。

以下是他们的github回购中的一个例子：

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

一个不错的选择是minwidth.js，它允许你为不同的宽度定义回调

minwidth(600, function() {
  doSomethingLikeLoadFacebook();
});

或简单的jQuery ......

$(document).ready(function() {
  $(window).resize(function() {
    if ($('.active.parent > ul').length > 0) {
      if ($(window).width() > 960) {
        $('.active.parent > ul').show();
      } else {
        $('.active.parent > ul').hide();
      }
    }
  });
  $(window).trigger('resize');
});

Answer 2

您可以检查设备的宽度，然后根据该显示菜单

if ($(window).width() > 960) {  // if device is wider than 960px
  if($('.active.parent > ul').length > 0) { // show menu
          $('.active.parent > ul').show();
  }
}

设备忽略一个JavaScript

2 个答案: