Question

我正在创建我的第一个“真实”网站，并尝试为我的布局和导航添加一些响应：www.dknytkom.dk/forside/

我对菜单项使用了大量的addClass和removeClass，以及与浏览器窗口的宽度相对应的切换。到目前为止一切都很好。

问题是，当我在iPhone上观看时，我的搜索字段会在焦点消失。当我的jquery命令使文件宽度改变时它消失时，我有一种模糊的怀疑。但是我真的很茫然。

当点击菜单元素时，菜单项的切换也会变得很糟糕，即使我让它们等待文档加载也是如此。有什么建议吗？

I've tried to create a jsfiddle from where the full code can be inspected:

$(document).ready(function() {

        var $introbrowserwidth= $(window).width();

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


        if ($introbrowserwidth <=480) {
        $soegelist.addClass('displaynone');
        $soegefelt.addClass('displaynone');
        $('#menudiv').removeClass('displayblock').addClass('displaynone');
        $('#menudiv > ul').addClass('background-colour7 zebra');
        $('#menudiv a').addClass('displayblock');

        }       
        else{
                $menulist.removeClass('listitem').addClass('inlineblock');
                $menu.removeClass('displaynone').addClass('displayblock');
                $soegefelt.removeClass('displaynone').addClass('inlineblock');

            };

                $soeg.on("click",function(e) { 

                                            e.preventDefault();

                                            $soegelist.toggleClass('displayblock');
                                            $soegefelt.toggleClass('displayblock');
                                            $emneoversigt.removeClass().addClass('displaynone');
                                            $soeg.toggleClass('soege-knap-aktiv');
                                            $('#menudiv').removeClass('displayblock').addClass('displaynone');
                                            $('#menudiv > ul').removeClass('background-colour7 zebra');

                                            $menuknap.removeClass('menu-knap-aktiv');

                                            $('ul.menu-item-holder').toggleClass('expandheight');

                                            });


                    $menuknap.on("click",function(e) { 

                                            e.preventDefault();

                                            var $menutilstand =  $(window).width();

                                            $menulist.addClass('padding5');
                                            $menuknap.toggleClass('menu-knap-aktiv');
                                            $soeg.removeClass('soege-knap-aktiv');
                                            $soegelist.removeClass().addClass('displaynone');
                                            $('ul.menu-item-holder').removeClass('height expandheight')
                                            $('#menudiv > ul').addClass('background-colour7 zebra');


                                            if($soeg.hasClass('soege-knap-aktiv')) { 
                                            $soeg.removeClass('soege-knap-aktiv');
                                                $('ul.menu-item-holder').removeClass('height expandheight');

                                                };

                                                if ( ($menutilstand <=480) && ($('#menudiv').hasClass('displaynone')) ) {
                                                $('#menudiv').removeClass('displaynone').addClass('displayblock');
                                                $($menulist).removeClass('displayblock').addClass('padding5 listitem');
                                                $soegefelt.removeClass('displayblock');


                                                } else {    $('#menudiv').removeClass('displayblock').addClass('displaynone');}

                                            if ($('ul#menu-item-holder').hasClass('expandheight')){
                                                    $('ul#menu-item-holder').removeClass('expandheight').addClass('height')
                                                        }


                                            });



                                $('#indexbtn').on("click",function(e) { 
                                $('#emneoversigt').toggleClass('displayblock');
                            e.preventDefault(); })




$( window ).resize(function()
                                            {

                                    var browserwidth= $(window).width();

                                    $emneoversigt.removeClass('listitem').addClass('displaynone');
                                    $('.menu').removeClass('padding5');
                                    $emneoversigt.removeClass('displayblock').addClass('displaynone');
                                    $menuknap.removeClass('menu-knap-aktiv');
                                    $('*').removeClass('height expandheight')
                                    $('#menudiv > ul').removeClass('background-colour7 zebra');
                                    $soeg.removeClass('soege-knap-aktiv');


                                            if(browserwidth <= 480 ) {

                                                                $soegefelt.addClass('displaynone');
$temamenu.addClass('displaynone');
$soegelist.removeClass('inlineblock displayblock').addClass('displaynone');
                                                                $menu.addClass('displaynone');
                                                                $menulist.removeClass('inlineblock').addClass('listitem');
                                                                $('ul.menu-item-holder').removeClass('height');
                                                                    $menulist.removeClass('listitem displayblock').addClass('displaynone');
                                                                $('#menudiv').removeClass('displayblock');

                                            $('ul#menu-item-holder').addClass('height');


                                             }
                                            else {      $('li#searchfield').removeClass().addClass('inlineblock');
                                                                $soegelist.removeClass('displaynone').addClass('inlineblock');
                                                                $menu.addClass('displayblock');                                             $temamenu.removeClass('displaynone');                                                           $menulist.removeClass('listitem stroke displayblock ').addClass('padding5 inlineblock');
$('ul.menu-item-holder').addClass('height');
                                                        }
                                        })

 });

Answer 1

这是您搜索的div：

<div id="search-table">
            <span>
                <form id="soege_form" action="<?=$grundsti;?>sider/soegning.php" method="post">
                    <input name="portal_id" type="hidden" value="<?=$valgt_portal_id;?>" />
                    <input placeholder="Søg i alle artikler"  name="soegeterm" border="none" id="soegeterm" type="text" size="30" maxlength="100" class="loginfelter venstrefloat boxshadow"  />
                    <button id="submit"  style="cursor: pointer;" class="sendknap venstrefloat button_bg">Søg</button>
                </form>
            </span>
        </div>

这是将div分配给变量的地方：

$soegelist = $('div#search-table') ;

此行使其消失：

    if ($introbrowserwidth <=480) {
            $soegelist.addClass('displaynone');
...

Answer 2

发现输入时输入会影响文档的宽度，从而激活我的js-resize函数。

奇怪的是，它只在iOS上这样做了。

解决方案是在条件中添加!$('input:focus').length，这意味着只要有人使用任何表单输入，就不会满足切换条件。

现在的问题是：如何区分想要和不需要的文档大小调整？

键盘输入后，元素会不由自主地切换

2 个答案: