Jquery切换不适用于iPhone

Question

我有一个响应式菜单，下面是JQuery代码。此菜单在iphone上不起作用。谁能帮忙。此代码在HTML中内联。

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
    jQuery(".menu").slideToggle(100, function() {
        jQuery(this).toggleClass("menu-expanded").css("display", "");
    });
});
});
</script>

HTML代码：

<div class="menu-trigger"> <a href="#" class="btn">Menu</a></div>

<div class="menu">
<ul>
<li> <a href="information/about-us.html" class="btn" title="About us"> About us </a></li>
<li> <a href="information/contact-us.html" class="btn" title="Contact us"> Contact us </a></li>
<li> <a href="information/sitemap.html" class="btn" title="Sitemap">Sitemap</a></li>
</ul>
</div>

CSS代码

.menu-trigger {display:none;height:20px;padding-top:5px;padding-bottom:5px;Margin-right:10px;width:100%;}


@media screen and (max-width:960px) {


.menu-trigger {display:block;float:left;background-color:green;color:white;height:100%;text-align:center;font:normal 0.9em arial; }

.menu-trigger  a {text-decoration:none;color:white;}
.menu-trigger  a:hover {color: brown ;text-decoration:underline;}

div.menu {display:none;}


div.menu-expanded {display:block;width:100%;background-color:green;color:white;font:normal 0.9em arial;}


div.menu {float:left;width:100%;background-color:white;-moz-border-radius:10px;}
div.menu li {list-style-type:none; text-align:left;font-size:1.0em;padding:5px;text-align:center;}
div.menu a {color:white;text-decoration:none;position:relative;left:-15px;}
div.menu a:hover {color: brown ;text-decoration:underline;}