我使用堆栈已有一段时间了,大部分时间我都找到需要的解决方案或可以解决问题的方法,但是在这种情况下,我无法使其正常工作。
我正在研究西班牙的专业形成模块“ Web应用程序开发”时,正在为我的最终项目建立一个网站。考虑到响应式设计,我结束了使用Bootsrap的工作,而我发现自己的JS代码禁用了Bootstrap下拉菜单Nav。
需要说明的是:我正在使用完整的jquery,因为我.load()
无法使iframe显示全部八个内容,解决方案是将另一个文件加载到div元素中,该元素在小屏幕上可以正确调整大小。
Functions.php
是我在其中放置一些功能的帮手,在这种情况下,它会读取数据库并为下拉菜单生成项目
是的,我想在其中加载其他文件,如果您知道如何使iframe显示所有内容并在Bootstrap中正确调整大小,请告诉我,我的解决方法是jquery + divs,它还可以工作...
php代码在生成菜单时工作完美(我可以在firefox的代码检查器中看到所有元素)
HTML(这是一个php文件... index.php):
<?php
include 'functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Project B.W.A.S.T</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- TOP menu -->
<div class="top_navbar">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Web logo -->
<!-- Button for collapsing the navbar -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible_nav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar collapsable on small devices -->
<div class="collapse navbar-collapse" id="collapsible_nav">
<ul class="navbar nav">
<!-- MAIN INDEX/HOME -->
<li class="nav-item dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" id="navbardrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CHAMPIONS
</a>
<div class="dropdown-menu" aria-labelledby="navbardrop">
<?php
$champions= list_champions();
foreach ($champions as $row) {
?>
<a id="champion_menu_button" class="dropdown-item" href="#"> <?php echo $row['name']; ?> </a>
<?php } ?>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- MAIN CONTENT -->
<div id="main_space" class="pt-2 pb-2 m-0 ">
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MyjS -->
<script src="mainWindowJS.js" defer async></script>
</body>
</html>
Javascrip “ mainWindowJs.js”
$("document").ready(function(){
$("div#main_space").load("main_content.php");
});
依次完成导入操作和我自己的JS加载后,下拉菜单将永远不会打开,但是删除我的JS代码会使下拉菜单起作用。
问题很简单:我该如何解决这些问题?,严重的是我被卡住了。
因此,问题实际上不在内容上。
和以前一样,我必须使用iframe将所有引导CSS jQuery等等加载到要在框架上显示的内容中。由于我要切换到div,因此实际上是在同一页面中加载了内容。
因此,我在主页中将所有内容双重导入。双重加载jQuery,Popper和Bootstrap的JavaScript。
删除其中之一可以解决问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句