Twitter Bootstrap Accordion и проблема переполнения выпадающего меню

Я использую Bootstrap для раздела моего сайта. Я смешиваю аккордеон с кнопкой выпадающего меню. Проблема возникает, когда кнопка находится внизу, раскрывающийся список скрыт, поскольку переполнение .accordion-body установлено как скрытое.

Вы можете посмотреть jsfiddle здесь:http://jsfiddle.net/DBQU7/6/

Я сделал то, что вы ожидаете, попытался сделатьoverflow-y:visible, Но тогда вы можете увидеть результат здесь, он не работает: (Вы также можете заметить, что раскрывающийся список находится внутри элемента div, который создает полосу прокрутки внутри элемента div вместо того, чтобы просто отображаться.

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

Я видел этот вопрос, который был похож:Twiiter Bootstrap (Button Dropdown) + Исправлено Div

Но это не решает проблему, как я упоминал выше.

Вопрос в том, как сделать так, чтобы выпадающий список отображался нормально.

Благодарю.

Единственное решение, которое я нашел до сих пор (и я был бы рад оказаться ошибочным), было добавить свойство CSS, которое делало бы переполнение видимым, когда оно было открыто, а затем с помощью сценария JS заставляло его переключаться между видимым и скрытым ... не идеал, но пока ничего лучше.

- Отредактировано - Это на самом деле не очень хорошо работает и не представляется жизнеспособным решением.

Ответы на вопрос(10)

overflow: visible когда меню открыто (демонстрация):

$('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 (протестировано с Chrome 19 в Linux), если мы установим переполнение напрямую.setTimeout() работает вокруг этой проблемы.

 22 июн. 2012 г., 23:50
- это кажется лучшим, на мой взгляд.

как вам нужна помощь с тем, чтобы раскрывающийся список кнопки Bootstrap работал внутри jqgrid (из связанного вопроса), ответ оказывается очень простым. Во-первых, в записи colModel для вашего столбца кнопки установите класс css, используя «классы». атрибут, затем добавьте строку в ваш файл CSS, чтобы сделать стиль для этого класса переполнения: видимым. В качестве бонуса, если вы установите title: false в записи colModel, вы избавитесь от всплывающей подсказки на своей кнопке.

Так:

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;}

.accordion-body[class*="in collapse"]{ overflow:visible;}

что опоздал на эту вечеринку на семь месяцев, но, может быть, кто-то еще посчитает это полезным.

Самым чистым решением, которое я нашел для этой проблемы, является использование обработчиков событий Bootstrap на аккордеоне. Это все еще немного глупо, но IMO менее хакерски, чем принятый ответ Скотта (который, я думаю, будет лучше, если бы не поведение в Chrome).

$(document).ready(function() {
  $('.accordion-body').on('shown', function() {
    $(this).css('overflow', 'visible');
  });
  $('.accordion-body').on('hide', function() {
    $(this).css('overflow', 'hidden');
  });
});

пример:

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/

Делаем это выпадающим.

Вот правило 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>

Я говорю частично, потому что, как только вы добавите класс, он пойдет вверх. Вы должны удалить класс, чтобы вернуть его обратно к поведению по умолчанию.

 23 июн. 2012 г., 07:22
Хах! Ну, закрой мне рот. Спасибо что подметил это.
 23 июн. 2012 г., 01:42
- загрузчик уже имеет «выпадающий» класс как часть его базового css. (См. Последнюю часть документации для раскрывающихся меню кнопок -twitter.github.com/bootstrap/components.html#buttonDropdowns.)

#collapseThree {
 overflow: visible;   
}​

http://jsfiddle.net/DBQU7/6/

найдете ли вы это приемлемое альтернативное решение или сколько элементов будет в вашем раскрывающемся списке, но вы могли бы использовать & quot;dropup& Quot; класс, чтобы выпадающее меню выпало вверх, а не вниз.

http://jsfiddle.net/ecSH4/

<div class="btn-group dropup">

UPDATE

Скорее клудги на данный момент, но в ограниченном смысле это «работает».

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();
});​
 21 июн. 2012 г., 03:23
@denislexic - добавлен еще один подход к решению проблемы.
 denislexic09 июн. 2012 г., 14:33
mg1075 - Спасибо за это. Я думал об этом, но иногда кнопка также сверху ... ха. Так что тогда будет такая же проблема.

поэтому я собираюсь опубликовать это здесь от имени сообщества начальной загрузки. По словам команды начальной загрузки, эта проблема должна быть исправлена в 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 & amp; 12. Это все браузеры, которые разрешены в нашей сети, но если он работает в IE8 и FF11, велика вероятность, что он будет работать везде. У меня были проблемы с принятым решением в FF11.

источник: твиттер github выпуск № 3601

Решение Вопроса
Original Idea

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

.in Класс добавляется при открытии и, таким образом, устанавливает видимость только при открытии.

Смотрите пример скрипки.

Update That May Help with Chrome Bug

Исправленная ниже заметка mg1075 может быть исправлена небольшим изменением кода выше, например так:

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

Это существенно мешаетoverflow от появления до завершения анимации. Это работает хорошо, за исключением того, что когда вы нажимаете кнопку вниз, чтобы открыть раскрывающийся список, а затемexit .accordion-body он снова будет отображаться в раскрывающемся списке, но только до тех пор, пока вы снова не наведите курсор мыши на область раскрывающегося списка. Некоторые могут считать поведение предпочтительным.

Смотрите скрипку с кодом обновления.

 23 июн. 2012 г., 05:13
в Chrome наблюдается короткое наложение контента при щелчке заголовка и переходах видимого контента из одного .collapse в другой.
 23 июн. 2012 г., 15:32
@ Mg1075 - хорошо. Я могу это подтвердить. Это почти как наборы FF.in после факта и Chrome до полного перехода. Это, вероятно, потребует некоторой настройки сценария, чтобы решить (если кто-то чувствовал, что это необходимо).
 22 июн. 2012 г., 23:41
+1, и я проголосовал. Одна проблема, однако, заключается в том, что переход css3 теперь приводит к краткому наложению двух текстовых слоев.
 23 июн. 2012 г., 04:50
@ mg1075 - Я не вижу задержки, на которую вы ссылаетесь.
 23 июн. 2012 г., 19:02
@ mg1075 - я добавил обновление с «твиком» кода, который помогает решить проблему анимации в Chrome.

Ваш ответ на вопрос