Wordpress上带有Javascript的条件链接
Wordpress上带有Javascript的条件链接
提问于 2017-03-09 15:54:08
我试图根据窗口的宽度创建一个条件链接。有可能有一个更好的方法来做这件事，我还没有想到。
有一个带有图像图标和标题的水平的正方形“按钮”，当点击其中一个按钮时，一个小的信息窗口会落在“按钮”行的下方。我使用了这个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> 回答 1
Stack Overflow用户
发布于 2017-03-09 16: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();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42699820
复制相关文章
相似问题
腾讯云开发者
