しばらくしてコーディングに戻る
コンテンツは、2 つの見出しを含むメニューを使用します: 1-サービス (いくつかの li 要素を含む) 2-製品 (いくつかの li 要素を含む)
このコードは、http: //jquerymobile.com/demos/1.2.0/docs/content/content-collapsible-set.htmlにある「5 つのセクションで構成される折りたたみ可能なセット」と同じコードを使用します。
Jquery は、折りたたみ時に id="services" および id="products" の div に "ui-collapsible-collapsed" のクラスを割り当てます。
私が設定した場合：
html, body {
height:100%;
}
.wrapper {
min-height: 100%;
次に、フッターはビューポートの下部にありますが、メニューとフッターを折りたたむと、メニューとフッターの間に大きなギャップがあり、特にモバイルデバイスでは快適ではありません.
上記の CSS コードを削除すると、次の問題が発生します。
1-フッターはメニューの近くまで移動し、本文と HTML はビュー ポートの高さまで伸びます。
サービスと製品のリンクのコンテンツに基づいて、javascript を使用して div id="mycontent" の高さを調整することで、これを解決することを考えました。
上記を実行できても、場合によっては問題が存在するように見えるため、これが正しいアプローチであるかどうかはわかりません。
質問: 1-この問題を解決するために何をお勧めしますか? Javaスクリプトの場合、解決策を提供することは可能でしょうか?
jquery cssファイルと私自身のいくつかを使用するため、追加しませんでした。上記URLから閲覧できます。読みやすくするために jsfiddle にコードを追加しました: http://jsfiddle.net/Davoud/AZK7B/ 追加した JavaScript に欠陥があり、修正する必要があることはわかっています。
ロジックは次のとおりです。div id="services" id="products" の「ui-collapsible-collapsed」のクラスを使用して、div id="mycontent" の高さを設定しています。したがって、このクラスがある場合は高さ 10em、ない場合は 40em です。
しかし、問題は、ユーザーがメニューを上下にスライドさせるサービスリンクをクリックするたびに、jquery が上記のクラスをサービス div に割り当てることです。そのため、「notcollapsed」クラスを「collapsed」クラスに置き換える前に、このクラスを削除する必要があります。
2-モバイル デバイスで使用する予定なので、onclick イベントと touchstart イベントの両方を一緒に使用する必要があります (デスクトップ ユーザーとモバイル ユーザーの両方に完全な機能が必要です)。同じ要素で両方のイベントを呼び出すことはできますか?
ご意見ありがとうございます。
ダヴー