WordpressでJavascriptによる条件付きリンク

Question

ウィンドウの幅に基づいて条件付きリンクを作成しようとしています。私が考えていないより良い方法があるかもしれません。

イメージアイコンとタイトルを含む横長の「ボタン」の行があり、ボタンの1つをクリックすると小さな情報ウィンドウが「ボタン」の行の下に表示されます。私はそのため、このJavascriptを使用：

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

問題が垂直列に崩壊非常に多くのボタンは、モバイルビューにあるので、それは非現実的である、ということです。その理由は、「情報」ウィンドウがすべてのボタンの下にあり、ユーザーが非常に遠くにスクロールしなければならない問題が生じ、すべてのボタンの下にウィンドウがあることを意識していないからです。

私がしたいのは、すべてのボタンのリンクを作成することです。各ボタンのリンクを作成することです（各ボタンに1つずつ）、ウィンドウの幅が一定量（たとえば700ピクセル）以下であれば、すべてのボタンの下の "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> 

Answer 1

私はそれがあなたの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(); 

    } 

});