2015-09-17 3 views
0

Я хочу, чтобы открыть панель над ул не толкая ул, а затем откройте panel..It должна скользить сверху внизОткрыть панель над литий

The код:

<html> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Collapsible Panel</h2> 
<button data-toggle="collapse" href="#collapse1">dasda</button> 
    <div class="panel-group"> 
    <div class="panel panel-default"> 
     <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body"><ul><li>asda</li><li>asda</li><li>asda</li><li>asda</li><li>asda</li></ul></div> 
     </div> 
    </div> 
    </div> 
</div> 
<ul><li>asda</li><li>asda</li><li>asda</li><li>asda</li><li>asda</li></ul> 

</body> 
</html> 

jsfiddle любое предложение плз ?

EDIT

OnClick литий кнопочная панель была бы открыта над другим li..In мой код, когда я щелкая, она толкает вниз литиево затем панель open..Just как example happend..but Я хочу открыть сверху до кнопки при нажатии кнопки в моем коде

+0

Пожалуйста, добавьте демо-версию – Chris

+0

@ 1l13v добавлено jsfiddle – Dhara

+0

еще одно безумие бутстрапа –

ответ

0

Используйте position: absolute; или position: fixed; на элементе, который вы хотите переместить поверх других элементов. This JSFiddle demonstrates. Держите их привязанными к родителям, которые затем можно обрабатывать как любой другой элемент и позицию по мере необходимости. Это означает, что родитель не учитывает ребенка при организации его содержимого. Here is some more detail.

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

Это работает, потому что новые значения позиции вытесняют элемент из потока документа, что означает, что другие дочерние элементы больше не обтекают его. Они обтекают другие элементы, которые все еще находятся в потоке документа.

+0

thnku для ответа ур .. Я решил использовать некоторые css из ур данной ссылки – Dhara

+0

noo. Добавление правил CSS для начальной загрузки (класса) очень плохое. Вы проверили, что такое беспорядок в скрипке? – Chris

+0

@ 1l13v мой ответ поможет объяснить некоторые из основных вещей, которые вам все еще нужно знать, чтобы эффективно использовать инфраструктуру, может быть класс, который достигает того же самого в бутстрапе, но полезно знать, что происходит в документе/css уровень –

0

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

<div class="panel-group my-panel"> и добавить это правило CSS:

.my-panel{ 
    position: absolute; 
    top: 90px; 
    left: 15px; 
} 

Попробуйте его в fiddle

Примечание: это не очень желательное решение, но в простых ситуациях вам может помочь.

+0

Почему это нежелательно? – RobAu

+0

, потому что вам нужно жестко закодировать свою позицию (слева и сверху в этом случае) – Chris

+0

Это не совсем так, вы можете жестко закодировать свои левые и верхние значения, но вы также можете использовать что-то более гибкое, например%, или содержать их все в то, что вы тогда позиционируете, оставляя их как значения по умолчанию, или вы можете использовать препроцессор/calc() для их работы - основная проблема «float this over that» хорошо решена с помощью позиции absolute, IMO –

Смежные вопросы