使用JQuery后禁用Bootstrap 4 Dropdown

阿尔贝纳诺1

我使用堆栈已有一段时间了,大部分时间我都找到需要的解决方案或可以解决问题的方法,但是在这种情况下,我无法使其正常工作。

我正在研究西班牙的专业形成模块“ 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代码会使下拉菜单起作用。

问题很简单:我该如何解决这些问题?,严重的是我被卡住了。

阿尔贝纳诺1

因此,问题实际上不在内容上。

和以前一样,我必须使用iframe将所有引导CSS jQuery等等加载到要在框架上显示的内容中。由于我要切换到div,因此实际上是在同一页面中加载了内容。

因此,我在主页中将所有内容双重导入。双重加载jQuery,Popper和Bootstrap的JavaScript。

删除其中之一可以解决问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章