Question

如果单击“菜单”（h3），此脚本工作正常，它会将整个菜单缩小到最小高度然后我再次点击，它会扩展回原始大小。

今天，有两种观众，如PC和智能手机。

当观看者看到带有智能手机的浏览器宽度小于400px的页面时，我想将此菜单显示为默认的最小值。最小尺寸是指手风琴关闭时的高度尺寸有可能吗？

的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)
    }

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

我可以根据浏览器窗口宽度设置jQuery手风琴吗？

1 个答案: