bootstrap: dropdown JS doesn't work on iPad

Code like the following works on desktop browsers, but on the iPad, the dropdown menu isn’t opening:

<ul class="nav pull-right">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown"> <strong>Drew Dara-Abrams</strong> 
        <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="/admin/users/1">Edit Your Profile</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="/users/sign_out">Sign Out</a>
            </li>
        </ul>
    </li>
</ul>

I’ve tried both the 2.0 release of bootstrap-dropdown.js and the latest from 2.0.3-wip.

About this issue

Original URL
State: closed
Created 12 years ago
Comments: 34 (2 by maintainers)

Most upvoted comments

I have the same problem … This is the html that doesn’t work on ipad. I can’t click on the sub-itens I already hack this html with

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">Export <span class="caret">
</span></button>
    <ul class="dropdown-menu">
        <#if  print?exists>
            <li><a href="javascript:print('${print}');">Print in PDF</a></li>
        </#if>
        <#if  printList?exists>
            <li><a href="javascript:print('${printList}');">Print list in PDF</a></li>
        </#if>
        <li><a href="javascript:exportListAt('${targetList}', 2);">Export to Excel</a></li>
        <li><a href="javascript:exportListAt('${targetList}', 1);">Export to CVS</a></li>
        <li><a href="javascript:exportListAt('${targetList}', 3);">Export to XML</a></li>
    </ul>
</div>

jQuery(document).ready( function (){
    jQuery('.dropdown-toggle')
        .on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); })
        .on('touchstart.dropdown', '.dropdown-submenu', function (e) { e.preventDefault(); })
    })

thiagolenz on Dec 11, 2012