Bootstrap 3 - расширить сжатую строку таблицы гладко

(пожалуйста, простите мое невежество, я не программист)Bootstrap 3 - расширить сжатую строку таблицы гладко

Вот мой codepen

У меня возникли проблемы с таблицей элементов, где я хочу, чтобы скрыть div с описаниями, если пользователь не нажимает на строку для определенного элемента.

Так что я почти получил его работу, как я хочу, используя class="collapse" - но анимация негладкая.

Затем я попытался использовать class="accordion-toggle" - теперь он плавный, но 1. Я не хочу иметь его как аккордеон (я хочу, чтобы пользователь мог расширять все описания) - даже если он не ведет себя как один, 2. он показывает некоторую часть строки ниже, которую я хочу скрыть, когда строка свернута.

примечание: я изменил по умолчанию начальной загрузки таблицы, как я хотел более высокие строки без границ, путем:

td { 
    height:50px; 
    border:none!important; 
    vertical-align:middle!important; 
}

Дополнительный вопрос: Я также хочу, чтобы иметь таблицу полосатых, но мои описания сломать потому что они находятся в каждом другом ряду (как предотвратить это?)

Вот чего я хочу достичь:

источник

2016-03-20 Seb

Полосатый эффект не будет работать из-за 'hiddenRows'. Я не думаю, что таблица - лучший подход для ваших нужд. – Yass

> Try this code. 

    <!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Accordion Example</h2> 
    <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> 
    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> 
     </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> 
     </h4> 
     </div> 
     <div id="collapse2" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> 
     </h4> 
     </div> 
     <div id="collapse3" class="panel-collapse collapse"> 
     <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
     </div> 
    </div> 
    </div> 
</div> 

</body> 
</html>

для таблицы полосы

<div class="panel-group"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h4 class="panel-title"> 
     <a data-toggle="collapse" href="#collapse1">Collapsible list group</a> 
    </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
    <ul class="list-group"> 
     <li class="list-group-item">One</li> 
     <li class="list-group-item">Two</li> 
     <li class="list-group-item">Three</li> 
    </ul> 
    <div class="panel-footer">Footer</div> 
    </div> 
</div>

источник

2016-09-14 08:56:03

вы явно даже не читали сообщение. Копирование примера склейки прямо из документации бутстрапа не поможет. – Seb

Извините, я не видел ваш дополнительный вопрос. Не могли бы вы поделиться своим кодом? Поэтому я могу вам помочь. –

Код общего пользования. – Seb

использовать это может быть, это поможет вам.

$(document).ready(function(){ 
    $('.hiddenRow').css('display','none'); 
    $('.accordion-toggle').click(function(){ 
    $('.hiddenRow').toggle(); 
    }) 
});

источник

2016-09-15 10:21:56

Не могли бы вы отредактировать код и сохранить его, а затем вставить ссылку на обновленный код? – Seb

это только код js. $ (document) .ready (function() { $ ('. HiddenRow'). Css ('display', 'none'); $ ('. Accordion- toggle '). click (function() { $ ('. hiddenRow '). toggle(); }) }); вам просто нужно добавить этот код в голову. остальная часть кода остается такой же. –

Bootstrap 3 - расширить сжатую строку таблицы гладко

ответ

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