クリック時のデフォルト動作の有効化と無効化

Question

私はヘッダーといくつかの項目を持つリストを持っています。ヘッダーをクリックすると、アイテムの表示が切り替えられます。

しかし、私はリンクにヘッダーを回したいと思います。大きな画面サイズの場合、このヘッダーはサブアイテムの表示を切り替えるべきではなく、通常のリンクのように動作します。

私はこの部分を動作させることができません。私はfalse/trueを返しましたが、動作しません。これを行うには良い方法がありますか？

JS：

var header = $('h3'); 
var list = $('ul'); 
var width = $(window).width(); 

header.click(function() { 
    collapse(this); 
}); 

var collapse = function (el) { 
    if ($(window).width() < 699) { 
     $(el).next().slideToggle(); 
     return false; 
    } else { 
     $(el).next().show(); 
     return true; 
    } 
}; 

JsFiddle。リンクを無視する

Answer 1

使用event.preventDefault();、

Fiddle

header.click(function(e) { 
    collapse(this,e); 
}); 

var collapse = function (el,event) { 
    if ($(window).width() < 699) { 
     event.preventDefault(); 
     $(el).next().slideToggle(); 

    } else { 
     $(el).next().show(); 
    } 
}; 

はまた、私はそれがとにかく別のリンクアドレスに移動するようelse{..}部分が必要とされないと思います。

Answer 2

window.matchMedia()は、一致するCSSメディアクエリをサポートしています。たとえば、次のコードを見てください。

var media = window.matchMedia("(min-width: 699px)"); 

media.addListener(function(m)}{ 
    header.unbind('click'); 
    if(m.matches){ 
     e.preventDefault(); 
     $(el).next().slideToggle(); 
    } 
}) 

jsによってメディアクエリがヒットした場合、これはそれぞれのクリックハンドラをバインドします。それを試して、あなたが望む結果を得るでしょう。私があなたのコードで見た1つの欠陥は、ユーザーが流体レイアウトを試してもイベントをバインドしないということでした。混乱するだけです。