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

У нас есть несколько файлов 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);
}

Тем не менее, с Googling и небольшим чтением кода Bootstrap, я не вижу ничего очевидного и прямого, чтобы попробовать. Как я могу вызвать метод свертывания Bootstrap без jQuery?

Всего 1 ответ


Вы можете использовать атрибуты данных, как показано в документации по 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> 


Есть идеи?

10000