Bootstrap5 下拉导航在所有页面上都不起作用

Question

从主页下拉菜单和其他导航工作正常。在我使用 Calendar Component 和 Semantic-UI(AutoComplete) nav 的其他页面中， nav 工作但 dropdown-menu 不工作。我使用了 jQuery *$.noConflict 但它不起作用。

这是我的代码片段：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>${initParam['companyName']}</title>
        <!--Animation On Scroll CSS File-->
        <link href="../assets/css/aos.css" rel="stylesheet" />
        
        <link rel="stylesheet" href="https://icons.getbootstrap.com/assets/font/bootstrap-icons.css"/>
   
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>-->

        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
      
        <h:outputScript library="javax.faces" name="jsf.js"/>
    </h:head>
    <f:view id="view1">
        <nav class="navbar navbar-expand-lg navbar-light bg-white">
            <div class="container-fluid">
                <a class="navbar-brand me-2 p-0" href="#">
                    <img src="../assets/images/logo1.jpg" alt="logo" width="50" height="50"/>
                    <marquee>${initParam['companyName']}</marquee>
                </a> 
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav nav-tabs me-auto mb-2 mb-lg-0 ms-md-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Set Up</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">                                
                                <li><a class="dropdown-item" href="#{appRoot}/miscMenu/UserMasterOps.xhtml">User Master</a></li>
                                <li><a class="dropdown-item" href="#{appRoot}/sharedUi/HomeCustomer.xhtml">Customer</a></li>
                                <li><a class="dropdown-item" href="#{appRoot}/miscMenu/AccountMasterOps.xhtml">Account Master</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-bs-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Supplier</a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#{appRoot}/supplierMenu/SupplierMasterOps.xhtml">Supplier Master</a></li>
                                <li><a class="dropdown-item" href="#{appRoot}/supplierMenu/SupplierProductCodeOps.xhtml">Product Code</a></li>                                
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#{appRoot}/sharedUi/HomeTransaction.xhtml">Transaction</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#{appRoot}/sharedUi/HomeReport.xhtml">Report</a>
                        </li>
                        </li>
                    </ul>
                    <span class="navbar-text">
                        <h:outputText value="Hi #{user}, #{siteName} "/> <a href="#{root}/logout.jsp"><img src="../assets/images/image_logout_blue.jpg"  width="35px" height="35px"/></a>
                    </span>
                </div>
            </div>
        </nav>        
    </f:view>
    <!--Animation On Scroll JS-->
    <script src="../assets/js/aos.js"></script>       
    <script>
        AOS.init();         
    </script>
</html>

Answer 1

您是否尝试过将此添加到您的 html 中？当我遇到类似问题时，它已为我修复。

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 2

这些行影响了我的代码

<h:selectOneMenu id="cn" styleClass="ui fluid search normal selection dropdown form-control" value="#{supCommonIDOpsBean.supName}">
     <f:selectItems value="#{supCommonIDOpsBean.supNameList}"/>
</h:selectOneMenu>

<script>
   $('.dropdown').dropdown();
</script>

我用下拉菜单替换了下拉菜单 class-name 以避免名称冲突，它解决了我的问题。

<h:selectOneMenu id="cn" styleClass="ui fluid search normal selection dropdowns form-control" value="#{supCommonIDOpsBean.supName}">
     <f:selectItems value="#{supCommonIDOpsBean.supNameList}"/>
</h:selectOneMenu>

<script>
   $('.dropdowns').dropdown();
</script>

Bootstrap5 下拉导航在所有页面上都不起作用

Bootstrap5 Dropdown Navigation Not Working from all page

jquery

jsf

bootstrap-5