Jquery 代码在浏览器中工作 - 但不是设备答案

【问题标题】：Jquery code work in browser - but not deviceJquery 代码在浏览器中工作 - 但不是设备
【发布时间】：2013-12-12 11:06:32
【问题描述】：

我似乎和这个帖子有同样的问题。

Jquery code not working on mobile device but working in browser

在我的网站http://dknytkom.dk/forside/ 中，菜单底部（一旦页面宽度小于 480 像素，就会通过媒体查询显示）将在链接下方切换菜单。

在浏览器上可以正常工作 - 但在我的 iPhone 上不行。

点击似乎有效，但 div class="menu" 没有切换。

$menuknap.click(function(){

$('.menu').toggle(); $('a').css('color','red'); $emneoversigt.removeClass('listitem').addClass('displaynone'); });

我尝试改用 on() 方法，但它似乎没有正确附加。

这里是html：

<ul>
            <li><a class="soege-knap mob-nav"></a></li>
            <li><a class="menu-knap mob-nav" ></a></li>
        </ul>

<div class="menu">
    <ul id="menu-list-portal" class="menu-list venstrefloat">
        <li><a href="<?=$grundsti;?>forside/?sekt=Stat">Stat</a></li>
        <li><a href="<?=$grundsti;?>forside/?sekt=Region">Region</a></li>
        <li><a href="<?=$grundsti;?>forside/?kat=35">KL</a></li>
        <li><a href="<?=$grundsti;?>forside/?sekt=Kommune">Kommune</a></li>
        <li><a href="<?=$grundsti;?>forside/?sekt=EU">EU</a></li>
        <li><a href="<?=$grundsti;?>debat.php">Debat</a></li>
        <li><a href="<?=$grundsti;?>forside/?baggrund=1">Baggrund</a></li>
    </ul>
        <div id="indexbtn" style="cursor:pointer" class="hoejrefloat"><a>&nbsp;Fagområder&nbsp;&#9662;</a></div>
        <div class="clearfloat"></div>
<div class="clearfloat"></div>
<div id="emneoversigt" class="displaynone">
        <ul><li><a class="counter padding5 background-colour7" href="<?=$grundsti;?>forside/?kat=<?=$kategori['id'];?>"></a></li>
                        </ul>
</div>
</div>

这是完整的脚本：

$(document).ready(function() {

$soeg = $('a.soege-knap');
$mobnav = $('a.mob-nav');
$soegelist = $('div#search-table') ;
$searchtable = $('#search-table') ;
$soegefelt = $('ul.menu-item-holder > li:last-child');
$menuknap = $('a.menu-knap');
$menu = $('div.menu')
$menulist = $('.menu li')
$emneoversigt = $('#emneoversigt')
$emneoversigtlistitem = $('#emneoversigt li')
$('.mob-nav').css('cursor','pointer');


$soeg.click(function(){


$soegelist.toggle();
$soegefelt.toggle();
$soeg.toggleClass("x")
                                                                        });
    $menuknap.click(function(){

$('.menu').toggle();
$('a').css('color','red');
$emneoversigt.removeClass('listitem').addClass('displaynone');
});

            $('#indexbtn').click(function(){    
                                    $emneoversigt.toggleClass('listitem');

                            });

【问题讨论】：

Der er da ingen class="menu-knap" - $(body).css('background-color', 'blue'); 也有错误，应该是 $("body").css('background-color', 'blue');
为<li><a class="soege-knap mob-nav"></a></li>和<li><a class="menu-knap mob-nav" ></a></li>添加href，在点击中传递偶数并执行event.preventDefault()
@mplungjan 抱歉 - 现在添加了 html。
@mplungjan 我会试试你的建议——如果我能解决的话
虽然很奇怪。在没有 href 添加 event.preventDefault() 的情况下切换搜索字段时，serach 按钮（放大镜）工作正常，但 div 仍然不会显示在我的手机上。

标签： jquery html iphone responsive-design

【解决方案1】：

对不起 - 愚蠢是无法治愈的。

div 从未加载到设备上，因为我有一个 php if 语句要求它不包含菜单，以防它检测到智能手机。

非常抱歉！

【讨论】：

没问题 - 如果您删除您的答案，您可以删除您的问题。
会的。虽然 event.preventDefault();似乎没有任何效果。你有想法吗？ $fagomraadeknap = $('a#indexbtn'); $fagomraadeknap.click(function() { $('#emneoversigt').toggle(); event.preventDefault(); }); $fagomraadeknap.stop() event.preventDefault();
如果我将功能放在 li 而不是锚点上，它就可以工作。但是不应该通过preventDefault dsiable锚点吗？
你只需要阻止一个链接：$someLink.on("click",function(e) { e.preventDefault(); ...