質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • JavaScript

    18784questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7555questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • レスポンシブWebデザイン

    229questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

タブを画面サイズによってアコーディオンにするjQueryについて(タブの中身が長い場合の対応)

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,792

Morrys_Box

score 2

少し長いですが、jQueryについて知識のある方、よろしくお願いします。
現在、個人で作成したPCサイトを、スマホ・タブレットにも対応させるべく、HTML・CSSの書き換え、=レスポンシブ対応を行なっております。

複数のページで、PC閲覧を前提としたタブを使用しておりました。
横方向のタブだったり縦方向のタブだったりと、タブの形式もいろいろです。
これらを一括でスマホ等に対応させる場合には、以下のようなjQueryの設置が解決の一例である事を知りました。

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

jQueryの設置は出来るので、ひとまずこれで『デザイン上は』自分のやりたい事が実現します。
しかし、アクセシビリティー上の問題が起こってしまい、ここでつまづいている状況です。

タブの中身が端末の表示領域よりもずっと長いため、他の項目をタップした時に、中身の最上部が画面の遙か上に行ってしまい、わざわざ上までスクロールして戻らなければいけません。

このままでは不便です。そこで、上記掲載先のjQueryを基本ベースとした上で『タップした箇所が画面の一番上に来る』ように機能追加したいと思っております。

具体的には、768pxをブレイクポイントに設定しているので、

  • 769px以上の時はタブ表示、他のタブを選択しても画面は移動しない。
  • 768px以下の時はアコーディオン表示、『他の項目をタップした時に、その箇所が画面の一番上に来る』。

という動作にしたいと思っております。

jQueryの一部書き換え・追加で可能なのではないかと考えておりますが、自分にはjQueryの知識がなく、検索しても解決の手立てや代替案も見つからず、打つ手を失っている状況です。
素人が作っている個人サイトに過ぎませんが、何卒お力添えいただきますよう、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

タブの中身が端末の表示領域よりもずっと長いため、他の項目をタップした時に、中身の最上部が画面の遙か上に行ってしまい、わざわざ上までスクロールして戻らなければいけません。

ページ全体がタブのボタンで埋まってしまうということですよね。
タブでなくドロワーなどを検討してみてはどうでしょうか?

直接の回答でなくてすみません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/26 14:23

    デモページを見た感じ、アコーディオンの一つを開くと他が閉まる仕様なので、コンテンツが長いと閉じたときにスクロールが置き去りにされるってことかと。
    これはこのプラグインがクソ仕様なだけなので、他のプラグインを探した方が良いんじゃないですかね?

    キャンセル

  • 2015/12/27 05:47

    ありがとうございます。そういう意味ですね。

    他のプラグインを探した限りでも、やはり置き去りになってしまうものばかりでしたし、タブの縦方向と横方向の切り替えに対応しているものがありませんでした。
    そして、アコーディオンの一つを開くと他が閉まる仕様にしたいので、開きっぱなしになるものは選択肢に含まれません。

    唯一スクロールが置き去りにならないプラグインがありましたが、これも同様にタブの縦横切り替えに対応していませんでした

    http://stackstock.net/archives/2040/
    (そもそも現在アクセスしても、デモとダウンロードがいずれも『ページが見つかりません』となってしまいアクセスできないようです)

    スクロールが置き去りにさえならなければ、先に添付した先のプラグインが一番自分の望んでいる挙動に近いのですが。。

    キャンセル

  • 2015/12/28 10:48

    なるほど、他が閉まる仕様のほうがいいのですね。
    ちょっと貼っていただいたURLが見られないですが、閉じるコンテンツの高さを取得し、その分マイナススクロールさせればお望みの挙動になるんじゃないかと。
    クリックしたタブより後のコンテンツが閉じるときはスクロールしない、コンテンツが閉じるスピードとスクローススピードなど、少し注意する点はありますが、そんなに複雑ではないコードで実現できそうです。

    キャンセル

0

$(document).ready(function() {
     //の下にこんなのを入れてブラウザバックで戻るとか?どうでしょうか
     $("#parentVerticalTab,#parentHorizontalTab,#ChildVerticalTab_1").click(function(){
      location.href="#"+$(this).attr("id");
     });
     //もしくは文章中に<a href="#タブのID">戻</a>とか所々に入れるとか;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

activate メソッドが、引数2個でtab選択完了時呼び出されます。
デフォルトは何もしない実装なので、初期化オプション指定時にコールバックを指定し、その中で
scrollIntoView なり、$.animate するなりしてコンテンツの先頭にスクロールさせれば良いかと。
第一引数に、タブオブジェクトで、findclass が resp-vtabs なら縦タブ表示中、resp-easy-accordion ならアコーディオンです。どっちであるかは関係なくて、コンテンツの先頭が画面上部にポイントされればいいのだから、相対スクロールさせればOK でづね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    18784questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7555questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • レスポンシブWebデザイン

    229questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。