问Wordpress上带有Javascript的条件链接
EN

Stack Overflow用户

提问于 2017-03-09 07:54:08

回答 1查看 70关注 0票数 1

我试图根据窗口的宽度创建一个条件链接。有可能有一个更好的方法来做这件事，我还没有想到。

有一个带有图像图标和标题的水平的正方形“按钮”，当点击其中一个按钮时，一个小的信息窗口会落在“按钮”行的下方。我使用了这个Javascript：

jQuery(function($)("#individuals-full a").click(function(e){
    e.preventDefault();
    jQuery(".toggle").hide();
    var toShow = jQuery(this).attr('href');
    jQuery(toShow).show();
});

问题是，因为有那么多按钮，在移动视图中折叠成垂直行，这是不切实际的。原因是"info“窗口位于这里所有按钮的下方，这给用户带来了一个问题，用户不得不滚动很远，而且可能没有意识到所有按钮下面都有一个窗口。

我想要做的是为每个按钮创建一个链接，如果窗口宽度低于一定数量(比如700‘s)，则创建一个单独的页面(每个按钮一个)，而不是在所有按钮下面显示"info“窗口。

下面是带有所有按钮的div的HTML，但缩短为只包含其中一个按钮的代码：

    <div id="individuals-full"><h1 style="text-align: center;">We assist    individual clients to find personalized solutions involving:</h1>
    <ul>
    <li><a href="#fiance-content"><div id="fiance" class="individual-icons"><img  class="aligncenter size-medium wp-image-1268"  src="finance-visas-01- 300x300.png" alt="" width="300" height="300"><h1 style="text-align:  center;">Fiancé Visas</h1></div></a></li>
    </ul>
    </div>
<div id="info-panel">
<div id="fiance-content" class="toggle" style="display:none"><hr/>
<h2>Best If You Want to Avoid a Long Separation</h2>
When the most important thing is for a couple to be together as quickly as  possible, then the fiancé visa usually delivers.  The average processing time (and thus, a good estimate of the period of separation from each other) is 6-8 months, the period from application to admission to the U.S.
</div>

wordpress

javascript

jquery

运维排障定位快人一步

一站式日志服务平台---日志服务 CLS，智能化配置、开箱即用，协助解决业务运维、服务监控、用户行为分析、日志审计等场景诉求。

回答 1

Stack Overflow用户

发布于 2017-03-09 08:08:27

我认为是你的e.preventDefault();停止了正确的点击功能，所以当你在移动的时候恢复它。

获取窗口的宽度，然后在函数中添加一个if语句，以检查窗口宽度是否大于可移动的，如果然后运行此函数。如果你在手机上，它就会被跳过。

var viewportWidth = jQuery(window).outerWidth();

jQuery(function($)("#individuals-full a").click(function(e){

    if ( viewportWidth > 768 ) {

        e.preventDefault();

        jQuery(".toggle").hide();
        var toShow = jQuery(this).attr('href');
        jQuery(toShow).show();

    }

});