下载菜单未显示在iPhone Bootstrap 4 Alpha上

Question

I am having trouble working with the 4.0.0-alpha.6 release of Bootstrap 4 on iPhone (but not Android). Our nav bar has two dropdown menus that work fine on desktop (and in developer tools for testing responsive activity). But when viewed on an iPhone the dropdowns do not work. It looks as though the there is an issue with the javascript - clicking on the dropdown should be adding the “show” class, but it does not do so on iPhone. Manually adding the “show” class by manipulating the DOM with developer tools brings about the expected CSS change and shows the dropdowns correctly. Can anyone advise on what might be keeping the javascript from working here? We're not getting any errors in the console.

Our repository is here . We're running Jekyll and Ruby 2.3.3.

The particular HTML snippet in question that is not getting JavaScript fired on it is the /_includes/menu.html from the repo:

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
  <!--<div class="container">-->
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="{{site.baseurl}}{{site.data.snippets.menu-home[page.lang]}}">The Programming Historian</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{site.data.snippets.menu-about[page.lang]}}
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-overview[page.lang].link}}">{{site.data.snippets.menu-about-overview[page.lang].title}}</a>
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-team[page.lang].link}}">{{site.data.snippets.menu-about-team[page.lang].title}}</a>
            <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-about-research[page.lang].link}}">{{site.data.snippets.menu-about-research[page.lang].title}}</a>
          </div>
        </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{site.data.snippets.menu-contribute[page.lang]}}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-overview[page.lang].link}}">{{site.data.snippets.menu-contribute-overview[page.lang].title}}</a>
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-feedback[page.lang].link}}">{{site.data.snippets.menu-contribute-feedback[page.lang].title}}</a>
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-review[page.lang].link}}">{{site.data.snippets.menu-contribute-review[page.lang].title}}</a>
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-write[page.lang].link}}">{{site.data.snippets.menu-contribute-write[page.lang].title}}</a>
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-edit[page.lang].link}}">{{site.data.snippets.menu-contribute-edit[page.lang].title}}</a>
          <a class="dropdown-item" href="{{site.baseurl}}{{site.data.snippets.menu-contribute-retirement[page.lang].link}}">{{site.data.snippets.menu-contribute-retirement[page.lang].title}}</a>
        </div>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="{{site.baseurl}}{{site.data.snippets.menu-lessons[page.lang].link}}">{{site.data.snippets.menu-lessons[page.lang].title}}</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="{{site.baseurl}}{{site.data.snippets.menu-blog[page.lang].link}}">{{site.data.snippets.menu-blog[page.lang].title}}</a>
      </li>

      <li class="nav-item">
        <a class="nav-link lang" href="{{site.baseurl}}{{site.data.snippets.menu-lang[page.lang].link}}">{{site.data.snippets.menu-lang[page.lang].title}}</a>
      </li>


    </ul>
  </div>
  <!--</div>-->
</nav>

Our header file containing all of the javascript references is at /_includes/header.html:

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    {% include metadata.html %}

    {% include twitter-card.html %}

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <link href="{{site.baseurl}}/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link href='{{site.baseurl}}/feed.xml' rel='alternate' type='application/atom+xml'>

    <title>{{ page.title }} | {{ site.name }}</title>

    <link href="https://fonts.googleapis.com/css?family=Crete+Round|Open+Sans|Quattrocento|Roboto|Roboto+Condensed" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="{{site.baseurl}}/css/github.css">
    <link rel="stylesheet" href="{{site.baseurl}}/css/style.css">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <script type="text/javascript" src="{{site.baseurl}}/js/ext_links.js"></script>
    <script type="text/javascript" src="{{site.baseurl}}/js/header_links.js"></script>
    <script type="text/javascript" async
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

  </head>

We're running the 4.0.0-alpha.6 release of Bootstrap JS and CSS. I've explored the responses here and here , but those workarounds didn't seem to work. Googling suggested that this was a known issue for BS4-alpha at the time, so I tried upgrading our version of Bootstrap to the latest stable release as per the documentation on BS4 available here . That does not fix the issue, though, and it also introduces other style issues that would be expected from such a migration. So I've left off from migrating right now. Any guidance on what might be getting lost in such a migration would be helpful, if that's the best solution.

Any help would be very appreciated, and I'm happy to give any further context or code required.

Answer 1

In case it helps anyone else in the future, I got this to work by adapting the code here . That link provides a little javascript to cover the functionality, though I had to adapt the jQuery selectors to make the code fit the structure of the html as we had it set up.