Кнопка Twitter Bootstrap нажмите, чтобы переключить развернуть / свернуть текстовый раздел выше кнопки

Я недавно пришел через bootstrap, и я работаю над расширением примера героя. Я хочу добавить следующее поведение на мою страницу:



при кнопку (т. е. элемент с селектором '.ряд.btn') нажата, я хочу иметь возможность переключаться между расширением / свертыванием части текста над кнопкой.



вот как выглядит HTML:



<html>

  <head>

      <title>Test Page</title>

    <!-- Le styles -->

    <link href="../assets/css/bootstrap.css" rel="stylesheet">

    <style type="text/css">

      body {

        padding-top: 60px;

        padding-bottom: 40px;

      }

    </style>

    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="navbar navbar-fixed-top">

    </div>



    <div class="container">

      <div class="hero-unit">

        <h1>Hello, world!</h1>

        <p>Blah, blah.</p>

        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>

      </div>



      <!-- Example row of columns -->

      <div class="row">

        <div class="span4">

          <h2>Heading</h2>

           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

          <p><a class="btn" href="#">View details &raquo;</a></p>

        </div>

      </div>

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="../assets/js/jquery.js"></script>

    <script src="../assets/js/bootstrap-transition.js"></script>

    <script src="../assets/js/bootstrap-alert.js"></script>

    <script src="../assets/js/bootstrap-modal.js"></script>

    <script src="../assets/js/bootstrap-dropdown.js"></script>

    <script src="../assets/js/bootstrap-scrollspy.js"></script>

    <script src="../assets/js/bootstrap-tab.js"></script>

    <script src="../assets/js/bootstrap-tooltip.js"></script>

    <script src="../assets/js/bootstrap-popover.js"></script>

    <script src="../assets/js/bootstrap-button.js"></script>

    <script src="../assets/js/bootstrap-collapse.js"></script>

    <script src="../assets/js/bootstrap-carousel.js"></script>

    <script src="../assets/js/bootstrap-typeahead.js"></script>



  </body>

</html>


Я могу взломать это с помощью jQuery, но может есть способ сделать это загрузочный образ? - то есть с помощью Bootstrap API?

567   5  

5 ответов:

на основе док

<div class="row">
    <div class="span4 collapse-group">
        <h2>Heading</h2>
        <p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

$('.row .btn').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $collapse = $this.closest('.collapse-group').find('.collapse');
    $collapse.collapse('toggle');
});

рабочая демо.

70  
2017-04-20 17:21:12

Это можно сделать без использования дополнительного кода JS, используя атрибуты Data-collapse и data-target на ссылке A.

например

<a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>

вот рабочий пример.

151  
2012-12-06 21:29:03

разрабатывая немного больше ответа Тейлора Готье (извините, у меня нет достаточной репутации, чтобы добавить комментарий), Я бы ответил Дину Ричардсону о том, как делать то, что он хотел, без какого-либо дополнительного кода JS. Чистый CSS.

вы бы заменили его .btn следующим образом:

<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails"></a>

и добавьте небольшой CSS для отображения содержимого:

.in.collapse+a.btn.showdetails:before { 
    content:'Hide details «';
}
.collapse+a.btn.showdetails:before { 
    content:'Show details »'; 
}

вот его модифицированный пример

29  
2013-10-04 23:35:09

Я хотел "развернуть/свернуть" контейнер с помощью кнопки "плюс" и "минус", чтобы открыть и закрыть его. Это использует стандартное событие bootstrap и имеет анимацию. Это BS3.

enter image description here

HTML:

<button id="button" type="button" class="btn btn-primary" 
  data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Show
</button>

<div id="demo" class="collapse">
  <ol class="list-group">
      <li class="list-group-item">Warrior</li>
      <li class="list-group-item">Adventurer</li>
      <li class="list-group-item">Mage</li>
  </ol>
</div>

JS:

$(function(){
  $('#demo').on('hide.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show');
  })
  $('#demo').on('show.bs.collapse', function () {
    $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide');
  })
})

пример:

http://plnkr.co/edit/aG5BtH?p=preview

10  
2016-03-28 15:39:03

html:

<h4 data-toggle-selector="#me">toggle</h4>
<div id="me">content here</div>

js:

$(function () {
    $('[data-toggle-selector]').on('click',function () {
        $($(this).data('toggle-selector')).toggle(300);
    })
})
1  
2016-06-28 07:34:03

Comments

    Ничего не найдено.
Click here to cancel reply.