21

Web サイトのセクションに Bootstrap を使用しています。アコーディオンとドロップダウン ボタンを組み合わせます。ボタンが一番下にあるときに問題が発生し、.accordion-body オーバーフローが非表示に設定されているため、ドロップダウンが非表示になります。

ここで jsfiddle を表示できます: http://jsfiddle.net/DBQU7/6/

だから私はあなたが期待することをやろうとしoverflow-y:visibleました。ただし、ここで結果を確認できますが、機能しません: (ドロップダウンが div 内にあり、表示されるだけでなく、div 内にスクロール バーが作成されることにも気付くかもしれません。

http://jsfiddle.net/DBQU7/5/

似たようなこの質問を見ました: Twiiter Bootstrap (Button Dropdown) + Div Fixed

しかし、上記のように問題は解決しません。

問題は、ドロップダウンを正常に表示するにはどうすればよいかということです。

ありがとう。

私がこれまでに見つけた唯一の解決策 (間違っていることが証明されれば幸いです) は、開いているときにオーバーフローを表示する CSS プロパティを追加し、JS スクリプトを使用して表示と非表示を切り替えることでした...理想的ではありませんが、これまでのところそれ以上のものはありません。

-- 編集済み -- 実際にはうまく機能せず、実行可能な解決策ではないようです。

4

10 に答える 10

39

オリジナルのアイデア

あなたはあなたの解決策に非常に近かった。これです：

.accordion-body.in { overflow:visible; }

クラスは開いた.inときに追加されるため、開いたときにのみ可視性を設定します。

フィドルの例を参照してください。

Chrome のバグに役立つ可能性がある更新

以下のバグ mg1075 のメモは、上記のコードを次のように少し変更することで解決できます。

.accordion-body.in:hover { overflow:visible; }

overflowこれにより、アニメーションが完了する前に が発生することが基本的に防止されます。下ボタンをクリックしてドロップダウンを開き、ドロップダウンを終了すると、ドロップダウンが再びトリミングされることを除いて、うまく機能しますが.accordion-body、ドロップダウン領域に再度マウスオーバーするまでのみです。この動作が好ましいと考える人もいるかもしれません。

更新コードのフィドルを参照してください。

于 2012-06-22T01:46:31.097 に答える
4

これが許容できる代替ソリューションであるかどうか、またはドロップダウンにいくつのアイテムがあるかはわかりませんが、「ドロップアップ」クラスを使用して、ドロップダウンメニューをダウンではなくドロップアップにすることができます.

http://jsfiddle.net/ecSH4/

<div class="btn-group dropup">

アップデート

この時点ではかなり不器用ですが、限られた意味では「機能します」。

http://jsfiddle.net/ecSH4/52/

$(".special-drop, .special-drop .caret").click(function() {
    var $myCollapsable = $(this).closest(".collapse"),
        $myDropDown = $(this).closest(".dropdown"),
        $myDropDownMenu = $(this).next(".dropdown-menu");

    function toggleDropMenu() {
        if ($myDropDown.hasClass("open")) {
            $myDropDownMenu.hide();
        } else {
            $myDropDownMenu.show();
        }
    }

    if ($myCollapsable.css("overflow") === "hidden") {
        $myCollapsable.css("overflow", "visible");
        toggleDropMenu();
    } else {
        $myCollapsable.css("overflow", "hidden");
        $myDropDownMenu.hide();
        toggleDropMenu();
    }

});

$(document).click(function() {
   $(".collapse").css("overflow", "hidden");
   $(".dropdown-menu").hide();
});​
于 2012-06-09T12:22:58.997 に答える
2

Bootstrap ボタンのドロップダウンを jqgrid 内で機能させるためのヘルプを探す方法をここで見つけた場合 (リンクされた質問から)、答えは非常に単純であることがわかります。まず、ボタン列の colModel エントリで、'classes' 属性を使用して css クラスを設定し、css ファイルに行を追加して、そのクラスのスタイルを overflow: visible にします。おまけとして、colModel エントリで title: false を設定すると、ボタンのツールチップ ホバーが削除されます。

そう：

colModel:[...
    {name:"Action", index:"RecID", classes:"actionTD", title:false, label:"Action", width: 80, fixed: true, sortable:false, align: 'center', formatter: 'actionFormatter'}

と：

.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}
于 2013-03-27T22:13:30.740 に答える
2

overflow: visibleメニューが開いているときに設定します ( demo ):

$('html').on('click', function() {
    setTimeout(function() {
        $('[data-toggle="dropdown"]').closest('.collapse').css('overflow', '');
    }, 0);
});

$('body').on('click', '[data-toggle="dropdown"]', function() {
    var parent = $(this).parent(), collapse = parent.closest('.collapse');
    setTimeout(function() {
        collapse.css('overflow', parent.hasClass('open') ? 'visible' : '');
    }, 0);
});

オーバーフローを直接設定すると、Chrome で再描画の問題が発生するようです (Linux 上の Chrome 19 でテスト済み)。setTimeout()この問題を回避します。

于 2012-06-17T20:21:09.520 に答える
1

だからここに部分的な解決策があります。これにより、ドロップダウンが意図的に上に移動します。ドロップアップにします。

追加するCSSルールは次のとおりです。

.btn-group.open-upward.open ul.dropdown-menu {
    top: auto;
    bottom: 100%;
}

したがって、追加するクラスはopen-upward

<div class="btn-group open-upward">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
  </ul>
</div>

クラスを追加すると上向きになるので、部分的と言います。クラスを削除して、デフォルトの動作に戻す必要があります。

于 2012-06-22T04:01:01.580 に答える
1

私はこのパーティーに7か月遅れていることを知っていますが、他の誰かがこれを参考にするかもしれません.

この問題に対して私が見つけた最もクリーンな解決策は、アコーディオンで Bootstrap イベント ハンドラーを使用することです。それはまだちょっと厄介ですが、IMOはScottSによって受け入れられた回答よりもハックではありません（Chromeでの動作がなければもっと良いと思います）。

$(document).ready(function() {
  $('.accordion-body').on('shown', function() {
    $(this).css('overflow', 'visible');
  });
  $('.accordion-body').on('hide', function() {
    $(this).css('overflow', 'hidden');
  });
});
于 2013-01-04T22:39:43.257 に答える
1

ドロップダウン トグル リンクに ID を追加します。

例：

id="actionButton"

そしてjQueryで

function actionButtonExpand() {
    var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
    var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
    var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
        $(this).dropdown();
        if($(this).parent().hasClass("open")){        
            $(this).parent().parent().parent().css("height","");
            $(this).parent().css("margin-bottom","9px");
        } else {
            $(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
            $(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
        }
    }

function actionButtonContract() {
    $("#actionButton").parent().parent().parent().css("height","");
    $("#actionButton").parent().css("margin-bottom","9px");

}                           
$("#actionButton").click(actionButtonExpand);
$(".accordion-toggle").click(actionButtonContract);

http://jsfiddle.net/baptme/6yAnc/

于 2012-06-16T21:22:10.470 に答える
0

これはGoogleでのこの問題の最初の結果であるため、ブートストラップコミュニティに代わってここに再投稿します。ブートストラップチームによると、この問題は3.0で修正されるはずです。以下は、推奨される暫定的な解決策です。

boostrap.jsで、遷移関数を変更します。

, complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0
        that.$element[method]('fully').trigger(completeEvent)
      }

boostrap.cssに、次のクラスを追加します。

.collapse.in.fully
{
    overflow:visible;
}

これをIE8、9、10、FF 11、12でテストしました。これらはすべて、ネットワークで許可されているブラウザーですが、IE8とFF11で機能する場合は、どこでも機能する可能性があります。FF11で受け入れられた解決策に問題がありました。

出典：twitter github issue＃3601

于 2013-02-20T07:28:38.580 に答える
0

ドロップダウン メニューを表示するために追加する必要があるのは、これだけです。

#コラプススリー{
 オーバーフロー: 可視;   
} </pre>


http://jsfiddle.net/DBQU7/6/
于 2012-06-23T01:34:03.110 に答える