it-swarm.dev

كيفية الحصول على Bootstrap القائمة الفرعية المنسدلة إلى 'dropup'

لدي Bootstrap القائمة المنسدلة. العنصر الأخير li هو قائمة فرعية. كيف أحصل على القائمة الفرعية المنسدلة بينما القائمة الكاملة منسدلة؟ ​​إليك الرمز:

<div class="dropdown">
    <a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li role="presentation">
            <a role="menuitem" href="#">Text</a>
        </li>
        <li role="presentation">
            <label>Label name</label>
            <label>Label name</label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
        </li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Centralities</a>
            <ul class="dropdown-menu">
                <label class="radio">
                    <input type="radio" name="options" id="optionsRadios1" value="A" checked>
                    AA </label>
                <label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="B">
                    BB </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="C">
                    CC </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="D">
                    DD </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="E">
                    EE </label>
            </ul>
        </li>
    </ul>
</div>
47
user1114864

يبدو أن الإجابة أدناه ستكون كيفية القيام بذلك من نقطة الصفر ، لم أكن أعلم بوجود فصل دراسي في Bootstrap ...

وبالتالي فإن الإجابة القصيرة Bootstrap الإجابة هي تطبيق فئة "dropup" على <ul> في الإصدارات السابقة من bootstrap:

 <ul class="dropdown-menu dropup" role="menu" aria-labelledby="dLabel">

ولكن في الإصدارات الأحدث من bootstrap (v3) يجب تطبيق فئة "dropup" على حاوية <ul> بدلاً من <ul> نفسها:

<div class="dropup">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>

انظر http://jsfiddle.net/ZgyZP/5/

إجابة العمل الأصلية التي لا تستخدم bootstrap:

يمكنك استخدام javascript لحساب ارتفاع القائمة الفرعية ثم تعويض موقع القائمة الفرعية سلبًا.

شيء مثل (مع مسج):

$('.dropdown-submenu').hover(
    function(){
    //hover in 
        $('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));

    },
    //hover out
    function(){
    }
);

كمان: http://jsfiddle.net/ZgyZP/4/

51
DrCord

أفضل حل:

<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div>

انها فئة الأم في التمهيد. يحتوي ملف CSS bootstrap (باستخدام 3.1.1)) .dropup .dropdown-menu محدد لذلك هكذا اكتشفت.

56
Sem

استخدم فئة ، مثل أعلى<ul class="dropdown up">

كتابة نمط أعلى.up { bottom:100% !important; top:auto !important; }

ملاحظة: زيادة القاع حسب حجم الزر الخاص بك.

23
Manjesh V
<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div> 

الرمز أعلاه صحيح ، لكنه لا يعمل إلا إذا كان عنصر الأصل يحتوي على مجموعة خصائص الموضع.

الأمثلة التي تعمل هي class="col-lg-12" أو فقط

<div style="position: relative;">

يمكنني استخدام Bootstrap v3.0.0.

1
pekaaw

لقد استخدمت فئة الإقلاع ، وعملت تمامًا كما كنت أتوقع ذلك.

<div class="col-md-6 dropup">
                <span uib-dropdown auto-close="outsideClick">
                    <p class="input-group">
                        <input type="text" class="form-control" ng-model="int.schTimeFormatted" ng-disabled="true" name="schTime" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default cal" uib-dropdown-toggle>
                                <i class="glyphicon glyphicon-time"></i>
                            </button>
                        </span>
                    </p>
                    <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                        <li class="timerDropdown">
                            <div class="row">
                                <div class="col-md-6">
                                    <div uib-timepicker ng-model="int.schTime" ng-change="changed()" hour-step="hstep" minute-step="mstep" readonly-input="true" min="min"
                                        max="max" show-meridian="ismeridian"></div>
                                </div>

                                <div>
                                    Booked Timeslots
                                    <ul id="timeListB">
                                        <li ng-repeat="time in bookedTimeslots">{{time | date:"h:mma"}}</li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <button class="pull-right">close</button>
                        </li>
                    </ul>
                </span>
            </div>
0
kads