0

如果我单击菜单（h3），此脚本运行良好，它确实将整个菜单缩小到最小高度。
然后我再次单击，它会扩展回原始大小。

今天，有两种查看器，例如 PC 和智能手机。

当查看者使用智能手机查看此页面时，我想让此菜单默认显示为最小尺寸，其浏览器宽度小于 400 像素。最小尺寸是指手风琴关闭时高度的尺寸。
可能吗？

javascript

jQuery(document).ready( function() {
    $(".accordion dt").click(function(){
        $(this).next("dd").slideToggle();
        $(this).next("dd").siblings("dd").slideUp();
        $(this).toggleClass("open");   
    $(this).siblings("dt").removeClass("open");
});

html

<div class="accordion">
    <dt><h3>Menu</h3></dt>
    <dd>
    Menu Contents
    </dd>
</div>

更新

    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        1. I want to show Menu as minimum size(Shrinked size)
    }else {
        2. I want to show Menu as maximum size(Expanded size)
    }
4

1 回答 1

1

如果没有关于您正在尝试做什么的更多信息，很难确定代码的确切形式。如果您想检查查看页面的浏览器类型，我建议将navigator.userAgent字符串与常见的移动浏览器匹配，如下所示：

var sUserAgent = navigator.userAgent.toLowerCase();
var bMobileBrowser = (sUserAgent.indexOf('iphone') !== -1) || (sUserAgent.indexOf('android') !== -1) || (sUserAgent.indexOf('mobile') !== -1);

if(bMobileBrowser) {
  // Do something special if it's a mobile browser
}

话虽如此，如果您要根据浏览器窗口的大小来改变您的内容，jQuery 为您提供了方便的跨浏览器方法$(window).width()和$(window).height( )分别以像素为单位返回视口的宽度和高度（令人震惊！）。在您的情况下，代码可能如下所示：

// This is a much shorter (and my preferred) way of writing jQuery(document).ready
$(function() {

  // Why bother rewrapping '.accordion dt' in a new selector every time its referenced?
  var $accordionHeader = $(".accordion dt");

  $accordionHeader.click(function() {
    $accordionHeader.next("dd").slideToggle();
    $accordionHeader.next("dd").siblings("dd").slideUp();
    $accordionHeader.toggleClass("open");   
    $accordionHeader.siblings("dt").removeClass("open");
  });

  // Toggle the accordion if the browser window's width is less than 400px
  if($(window).width() < 400) $accordionHeader.click();
});
于 2013-08-04T04:10:28.053 回答