首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Wordpress上带有Javascript的条件链接

Wordpress上带有Javascript的条件链接
EN

Stack Overflow用户
提问于 2017-03-09 15:54:08
回答 1查看 70关注 0票数 1

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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,但缩短为只包含其中一个按钮的代码:

代码语言:javascript
代码运行次数:0
运行
复制
    <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> 
EN

回答 1

Stack Overflow用户

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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();

    }

});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42699820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档