0

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

在设备上查看时，菜单位于页面顶部且较小。我需要它做的是当单击该项目时，菜单会再次关闭，因此菜单不会覆盖内容。这是保持它打开的脚本，我想我正在寻找一个 if (device) ignore this line ...

<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();

希望这是有道理的？！

4

2 回答 2

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');
});
于 2012-10-10T11:43:46.890 回答
0

您可以检查设备的宽度，然后显示取决于该设备的菜单

if ($(window).width() > 960) {  // if device is wider than 960px
  if($('.active.parent > ul').length > 0) { // show menu
          $('.active.parent > ul').show();
  }
}
于 2012-10-10T11:40:31.423 回答