ドロップダウンメニューはクリック時にスクロールします

UltraSonja

ページの下部にドロップダウンメニューがあります。ユーザーがクリックすると、ページがメニューコンテンツの一番下まで自動的にスクロールダウンするようにします。現在、ユーザーはメニューを開いたときに手動でページを下にスクロールする必要があります。最初はアンカーを使おうとしましたが、ドロップダウン機能が壊れてしまうので、ボタンのままにしておきたいと思います。

plnkrにテストアンカーを含めましたが、これは期待どおりに機能します。また、テスト後にドロップダウンコンテンツが表示される理由もわかりませんdiv

HTML

<div class="bottom btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"
   aria-haspopup="true" aria-expanded="false">
        Themes <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        <ul>
            <li>Teal</li>
            <li>Gray</li>
            <li>Plum</li>
            <li>Violet</li>
        </ul>
    </div>
    <br /><br /><br /><br />
    <div id="test">test</div>
</div>

CSS

.bottom {
    bottom: -890px;
}
レオハビエル

このJSを試してください:

$(document).ready(function() {
  $('.dropdown-toggle').dropdown();

  $('.dropdown-toggle').on('click',function(){
    var height = $(document).height();
    $(window).scrollTop(height);
  });
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

CSSドロップダウンメニューは、ホバー時にヘッダーdivにスクロールバーを追加します

分類Dev

ドロップダウンメニューをクリックします

分類Dev

ドロップダウンメニューをクリックします

分類Dev

ドロップダウンメニューをクリックします

分類Dev

ホバードロップダウンメニューをクリック可能なドロップダウンメニューに変換します

分類Dev

クリック後もドロップダウンメニューを表示したままにする

分類Dev

クリックしにくいドロップダウンメニュー MaterializeCSS

分類Dev

Yii2Codeceptionテストドロップダウンメニューをクリックします

分類Dev

ドロップダウンメニューのデフォルトオプションを変更するには、ドロップダウンメニューからテキストをクリックする必要があります

分類Dev

ドロップダウンメニューを表示するにはクリックしてください

分類Dev

ドロップダウンメニューをクリック可能にしてリダイレクトする

分類Dev

クリック時のドロップダウンメニュー

分類Dev

ホバー時にドロップダウンメニューを表示し、CSSのみを使用してクリックすると閉じます

分類Dev

ブートストラップドロップダウン-メニュー項目をクリックし、最後のサブメニュー項目にスクロールします

分類Dev

ドロップダウンメニューは機能しますが、ホバーしてクリックしない場合にのみ機能します

分類Dev

ドロップダウンメニューは自動的にチェックボックスをチェックします

分類Dev

ナビゲーションバーは、ドロップダウンメニューの外にあるリンクにリンクします

分類Dev

ブートストラップモバイルドロップダウンメニューリンクはクリックできません

分類Dev

ドロップダウンメニューの選択はリンクに移動しません

分類Dev

CSSドロップダウンメニューは、Chromeのボタンをクリックしてホバーするとページを下にスクロールします

分類Dev

Behatは正常に機能しますが、クリックしようとするとPhantomJSがドロップダウンメニューで失敗します

分類Dev

ドロップダウンメニューは他のリンクの下に表示されます

分類Dev

クリックする前にCSSドロップダウンメニューが閉じます

分類Dev

他のメニュー項目をクリックして、別のドロップダウンメニューを非表示にします

分類Dev

ブートストラップのリンクにドロップダウンメニューを追加する

分類Dev

Slackアプリはメッセージメニューのマルチセレクトドロップダウンをサポートしていますか?

分類Dev

クリックするとjQueryまたはJavaScriptメニューのドロップダウン

分類Dev

ドロップダウンメニューのホバーをオンクリックトグルに変更します

分類Dev

Bootstrap4を使用してAngular6のクリック可能なテーブル行にドロップダウンメニューを追加します

Related 関連記事

  1. 1

    CSSドロップダウンメニューは、ホバー時にヘッダーdivにスクロールバーを追加します

  2. 2

    ドロップダウンメニューをクリックします

  3. 3

    ドロップダウンメニューをクリックします

  4. 4

    ドロップダウンメニューをクリックします

  5. 5

    ホバードロップダウンメニューをクリック可能なドロップダウンメニューに変換します

  6. 6

    クリック後もドロップダウンメニューを表示したままにする

  7. 7

    クリックしにくいドロップダウンメニュー MaterializeCSS

  8. 8

    Yii2Codeceptionテストドロップダウンメニューをクリックします

  9. 9

    ドロップダウンメニューのデフォルトオプションを変更するには、ドロップダウンメニューからテキストをクリックする必要があります

  10. 10

    ドロップダウンメニューを表示するにはクリックしてください

  11. 11

    ドロップダウンメニューをクリック可能にしてリダイレクトする

  12. 12

    クリック時のドロップダウンメニュー

  13. 13

    ホバー時にドロップダウンメニューを表示し、CSSのみを使用してクリックすると閉じます

  14. 14

    ブートストラップドロップダウン-メニュー項目をクリックし、最後のサブメニュー項目にスクロールします

  15. 15

    ドロップダウンメニューは機能しますが、ホバーしてクリックしない場合にのみ機能します

  16. 16

    ドロップダウンメニューは自動的にチェックボックスをチェックします

  17. 17

    ナビゲーションバーは、ドロップダウンメニューの外にあるリンクにリンクします

  18. 18

    ブートストラップモバイルドロップダウンメニューリンクはクリックできません

  19. 19

    ドロップダウンメニューの選択はリンクに移動しません

  20. 20

    CSSドロップダウンメニューは、Chromeのボタンをクリックしてホバーするとページを下にスクロールします

  21. 21

    Behatは正常に機能しますが、クリックしようとするとPhantomJSがドロップダウンメニューで失敗します

  22. 22

    ドロップダウンメニューは他のリンクの下に表示されます

  23. 23

    クリックする前にCSSドロップダウンメニューが閉じます

  24. 24

    他のメニュー項目をクリックして、別のドロップダウンメニューを非表示にします

  25. 25

    ブートストラップのリンクにドロップダウンメニューを追加する

  26. 26

    Slackアプリはメッセージメニューのマルチセレクトドロップダウンをサポートしていますか?

  27. 27

    クリックするとjQueryまたはJavaScriptメニューのドロップダウン

  28. 28

    ドロップダウンメニューのホバーをオンクリックトグルに変更します

  29. 29

    Bootstrap4を使用してAngular6のクリック可能なテーブル行にドロップダウンメニューを追加します

ホットタグ

アーカイブ