Maison > Questions et réponses > le corps du texte
J'ai longtemps cherché pourquoi mon menu Bootstrap ne s'ouvre pas.
J'ai d'abord lié JQuery pour le faire fonctionner, mais rien ne semble changer. Je ne sais pas s'il manque quelque chose. Ma console n'affiche aucun message indiquant que JQuery est manquant.
Voici mon application.html.erb
<!DOCTYPE html> <html> <head> <title>Peachux</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> <script src="https://kit.fontawesome.com/b43f353bd3.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <%= render "shared/navbar" %> <%= render "shared/flashes" %> <%= yield %> <%= render "shared/footer" %> </body> </html>
Et mon application.scss
// 图形变量 @import "config/fonts"; @import "config/colors"; // 外部库 @import "bootstrap/scss/bootstrap"; @import "font-awesome"; // 你的CSS部分 @import "components/index"; @import "components/banner"; @import "components/button"; @import "components/work-card"; @import "components/work-header"; @import "components/profile"; @import "components/form"; @import "components/link"; @import "components/advantages-block"; @import "components/newsletter-block"; @import "components/testimonials"; @import "components/footer"; // 页面部分 @import "pages/home"; @import "pages/index"; @import "pages/works"; @import "pages/about";
Merci pour votre soutien !
P粉7941776592023-09-14 17:40:03
Vous avez présenté Bootstrap JS deux fois et jQuery deux fois.
Veuillez essayer le code suivant :
<!DOCTYPE html> <html> <head> <title>Peachux</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> <script src="https://kit.fontawesome.com/b43f353bd3.js" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <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://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <%= render "shared/navbar" %> <%= render "shared/flashes" %> <%= yield %> <%= render "shared/footer" %> </body> </html>