Блог

У меня есть панель навигации UIKit, но выпадающий список не будет работать. Я видел похожий пост здесь, в котором говорилось, что проблема может быть в jquery, но я пробовал устанавливать jquery всеми возможными способами. При этом это похоже на проблему javascript. В настоящее время я с удовольствием использую jquery в приложении. Я использую webpacker, и я вижу, что значки uikit и uikit присутствуют на вкладке источников отладчика Chrome. Это haml и сгенерированный html:

 %nav#navbar.uk-navbar-container.uk-navbar
  #logo.uk-navbar-left
    Logo
  #user-navbar.uk-navbar-right
    - if user_signed_in?
      %ul.uk-navbar-nav
        %li.uk-parent
          %a{href: '#'} #{current_user.display_name}
          .uk-navbar-dropdown
            %ul.uk-nav.uk-navbar-dropdown-nav
              %li
                = link_to 'Sign out', '/users/sign_out', :method => :delete
  

 <nav class="uk-navbar-container uk-navbar" id="navbar">
  <div class="uk-navbar-left" id="logo">
    Logo
  </div>
  <div class="uk-navbar-right" id="user-navbar">
    <ul class="uk-navbar-nav">
      <li class="uk-parent">
        <a href="#">Should Dropdown</a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-nav">
            <li>
              <a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>
  

Мне кажется, что это следует примеру здесь: https://getuikit.com/docs/navbar#usage

это ДОЛЖНО СРАБОТАТЬ :

 <!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script>
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

       
    Logo


    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Should Dropdown</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                         <a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>
                        
                        
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</nav>