Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.9k views
in Technique[技术] by (71.8m points)

jquery - Bootstrap 4 navbar dropdown menu item not clickable on mobile devices

I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail.

What am I doing wrong here (other than using the alpha version)?

Here's the site where you can test it: http://www.wrestlestat.com

Keep in mind, if you just resize your browser from a desktop to the mobile size, everything works fine, it only doesn't work when viewing from a mobile device.

Here's the code for the navigation menus:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus">
                ?
            </button>
            <a href="/" class="navbar-brand">
                <img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" />
            </a>
        </div>
        <div id="collapsemenus" class="collapse navbar-toggleable-xs">
            <ul class="nav navbar-nav">
                <li class="nav-item m-l-1 hidden-xs-down">
                    <a class="nav-link donate" type="button">Donate</a>
                </li>
                <li class="nav-item hidden-sm-up">
                    <a class="nav-link donate" type="button">Donate</a>
                </li>
                <li class="nav-item">
                    <a href="/team/select" class="nav-link" type="button">Teams</a>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown">Fantasy</a>
                    <div class="dropdown-menu background-black">
                        <a href="#" class="dropdown-item">Pick'Em</a>
                        <!--/fantasy/thisweek-->
                        <a href="#" class="dropdown-item">Tourney Pool</a>
                        <!--/tourneypool/main-->
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown">Compare</a>
                    <div class="dropdown-menu background-black">
                        <a href="/compare/dual" class="dropdown-item">Dual Lineup</a>
                        <a href="/compare/wrestler" class="dropdown-item">Wrestlers</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown">Rankings</a>
                    <div class="dropdown-menu background-black">
                        <a href="/rankings/wrestler" class="dropdown-item">Wrestlers</a>
                        <a href="/rankings/weight/125" class="dropdown-item p-l-3 hidden-sm-down">125</a>
                        <a href="/rankings/weight/133" class="dropdown-item p-l-3 hidden-sm-down">133</a>
                        <a href="/rankings/weight/141" class="dropdown-item p-l-3 hidden-sm-down">141</a>
                        <a href="/rankings/weight/149" class="dropdown-item p-l-3 hidden-sm-down">149</a>
                        <a href="/rankings/weight/157" class="dropdown-item p-l-3 hidden-sm-down">157</a>
                        <a href="/rankings/weight/165" class="dropdown-item p-l-3 hidden-sm-down">165</a>
                        <a href="/rankings/weight/174" class="dropdown-item p-l-3 hidden-sm-down">174</a>
                        <a href="/rankings/weight/184" class="dropdown-item p-l-3 hidden-sm-down">184</a>
                        <a href="/rankings/weight/197" class="dropdown-item p-l-3 hidden-sm-down">197</a>
                        <a href="/rankings/weight/285" class="dropdown-item p-l-3 hidden-sm-down">285</a>
                        <div class="dropdown-divider hidden-xs-down"></div>
                        <a href="/rankings/dual" class="dropdown-item">Dual Team</a>
                        <a href="/rankings/tournament" class="dropdown-item">Tournament Team</a>
                        <div class="dropdown-divider hidden-xs-down"></div>
                        <a href="#" class="dropdown-item">Statistical</a>
                    </div>
                </li>
                <li class="nav-item btn-group">
                    <a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown">Profile</a>
                    <div class="dropdown-menu background-black">
                        <a href="/account/login" class="dropdown-item">Login</a>
                        <a href="/account/register" class="dropdown-item">Register</a>
                        <a href="/account/forgotpassword" class="dropdown-item">Forgot Password</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Here's a bootply, but probably doesn't do much good since it must be on a mobile device to not work.

http://www.bootply.com/9Z9oycwCSh

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I found out that this was NOT a bug with Bootstrap 4. It was a flaw in how I was configuring my dropdown anchor element. Here's the corrected version:

<a class="dropdown-toggle nav-link" href="#" role="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rankings</a>

The differences are:

  1. Removed type="button"
  2. Added href="#"
  3. Added role="button"
  4. Added aria-haspopup="true"
  5. Added aria-expanded="false"

Those 5 things fixed my problem.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...