Как вызвать метод свертывания Bootstrap без JQuery - PullRequest
Новая
       20

Как вызвать метод свертывания Bootstrap без JQuery

0 голосов
/ 15 мая 2019

У нас есть несколько файлов TypeScript, но нет способа получить к ним доступ из jQuery.Мы хотим вызвать метод свертывания Bootstrap ... 

$(object).collapse(method)

без использования jQuery.

Желаемый результат 

//Mimics the functionality of Bootstrap's jQuery collapse.
function Collapse(object, method)
{
    /* Magic jQuery avoidance here */.collapse(method);
}

Однако, с помощью Googleи какое-то легкое чтение кода Bootstrap, я не вижу ничего очевидного и простого, чтобы попробовать.Как я могу вызвать метод свертывания Bootstrap без jQuery?

1 Ответ

0 голосов
/ 15 мая 2019

Вы можете использовать атрибуты данных, как показано в документации Bootstrap.Bootstrap использует jquery за кулисами, но вам не нужно обращаться к нему напрямую, если вы используете атрибуты данных 'data-toggle = "collapse"' и 'data-target = "# yourId"' 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
...