0

メニュー (h3) をクリックすると、このスクリプトは完全に機能し、メニュー全体が最小の高さに縮小されます。
次にもう一度クリックすると、元のサイズに戻ります。

現在、ビューアには PC とスマートフォンの 2 種類があります。

ブラウザ幅が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)
    }
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 に答える