Блог

Настройка нового сайта с использованием bootstrap версии 5.0 и следующего для панели навигации

 <nav class="navbar navbar-expand-md navbar-dark fixed-top">
    <a class="navbar-brand font-orbitron" href="/">
        <img src="/static/images/binoculars.png" alt="Logo" class="nav-logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample">
        <ul class="navbar-nav mr-auto">
            
                <li class="nav-item font-abeezee active">
                    <a class="nav-link" href="/" title="Kenya Professional Safari Guides Association">Home</a>
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/about-us" title="About Us">About Us</a>
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/gallery" title="Gallery">Gallery</a>
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/careers" title="Careers">Careers</a>
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/contact-us" title="Contact Us">Contact Us</a>
                </li>
            

            
                <li class="nav-item font-abeezee dropdown">
                    <a class="nav-link dropdown-toggle" href="/guides" title="Guides"  role="button" data-bs-toggle="dropdown" aria-expanded="false">Guides </a>
                    
                    
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            
                            <li>
                                <a class="dropdown-item" href="/guides/gold-membership" title="Gold-Level Members">Gold-Level Members</a>
                            </li>
                            
                            <li>
                                <a class="dropdown-item" href="/guides/silver-membership" title="Silver-Level Members">Silver-Level Members</a>
                            </li>
                            
                            <li>
                                <a class="dropdown-item" href="/guides/bronze-membership" title="Bronze-Level Members">Bronze-Level Members</a>
                            </li>
                            
                        </ul>
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/directors-committee-members" title="Directors amp;amp; Committee members" >Directors amp;amp; Committees </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/code-of-conduct" title="Code of conduct" >Code of conduct </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/sample-questions" title="Sample KPSGA Test Questions " >Sample Questions </a>
                    
                    
                </li>
            
                <li class="nav-item font-abeezee">
                    <a class="nav-link" href="/sponsors" title="KPSGA Sponsors" >Corporate Sponsors </a>
                    
                    
                </li>
            

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
 

когда я нажимаю на выпадающий переключатель, я получаю эту ошибку

 2index.js:60 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/guides' is not a valid selector.
    at f (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:1460)
    at Function.i.getParentFromElement (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:27564)
    at Function.i.clearMenus (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:26834)
    at i.a.toggle (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:23632)
    at Function.i.dropdownInterface (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:26578)
    at HTMLAnchorElement.<anonymous> (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:28967)
    at HTMLDocument.i (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:4685)
f @ index.js:60
i.getParentFromElement @ dropdown.js:403
i.clearMenus @ dropdown.js:352
a.toggle @ dropdown.js:134
i.dropdownInterface @ dropdown.js:334
(anonymous) @ dropdown.js:482
i @ event-handler.js:118
 

и выпадающий список не работает

Согласно документации, если вы хотите использовать a в качестве кнопки, вы должны использовать href="#" вместо href="/something"