Question

我试图以640px＆amp; am复制mashable.com的第二个菜单。 320像素。我调用调整大小时遇到问题，因为当从640px旋转到320px时，菜单项元素不再处于焦点状态。你能帮帮我吗？

这是当前的代码，我暂时取出了调整大小功能，直到我可以对其进行排序。

<script>
        jQuery(document).ready(function(){
            var sliderWidth = jQuery('.mosts').css('width');
            swidthnum = sliderWidth.replace("px", "");

            if (swidthnum >= 640) {
                jQuery('#slider').css('width', '150%');
                jQuery(".buttongroup1>.date-nav-1").click(function(){
                    jQuery("#slider").animate({left: "0px"});
                }); 
                jQuery(".buttongroup1>.date-nav-3").click(function(){
                    jQuery("#slider").animate({left: "-50%"});
                }); 
            }
            else if (swidthnum >= 320) {
                jQuery('#slider').css('width', '300%');
                jQuery(".buttongroup2>.date-nav-1").click(function(){
                    jQuery("#slider").animate({left: "0px"});
                }); 
                jQuery(".buttongroup2>.date-nav-2").click(function(){
                    jQuery("#slider").animate({left: "-100%"});
                });
                jQuery(".buttongroup2>.date-nav-3").click(function(){
                    jQuery("#slider").animate({left: "-200%"});
                });
            }

            jQuery(window).resize(function(){location.reload();});
        });             
</script>
<div class="buttongroup1">
        <button class="date-nav-1">WHAT'S TRENDING</button>
        <button class="date-nav-3">READ MORE</button>
    </div>
    <div class="buttongroup2">
        <button class="date-nav-1">TRENDING</button>
        <button class="date-nav-2">NEWEST</button>
        <button class="date-nav-3">READ MORE</button>
    </div>

我一直试着让640px到320px看起来不错。我认为伪代码是这样的：当页面首次加载时，焦点为.date-nav-1，旋转时将焦点保持在当前元素上，无论是.date-nav-1还是.date-nav-3 每次我添加一个调整大小的函数它失去焦点:(

现在让我走的路会很棒！）

Answer 1

也许：

$(window).resize(function(){$("#my-element").focus();});

PS：为什么要重新加载页面？我不推荐这个。

使用jquery如何在调整大小后保持元素聚焦？

1 个答案: