jquery：サブメニューをスライドさせ、スパンをクリックすると1050pxより広い画面にのみ表示されます

Question

私はいくつかのサブメニュー付きのメニューを持っています。私の要求は次のようになります：サブメニューをスライド（トグル）してからスパンをクリックし、1050pxより広い画面でのみ行います。トリックは - 私はこのコードでそれを "作成" の前に何のspan要素はありません。今、すべてうまく働いまで

<li><span>Piirissaar</span></li> 

：後

<li><a href="http://piirissaareturism.ee/avasta-piirissaar/">Piirissaar</a> 

：前

$('#main-menu > ul > li:nth-child(1) > a,#main-menu > ul > li:nth-child(2) > a').replaceWith(function() { 
return '<span>' + $(this).text() + '</span>' 
}); 

。しかし、次はありません。

私が作成したコードが、もちろん動作していない：

$('#main-menu ul li span:has(.dropdown-menu)').on('click').find('ul').slideToggle(); 
}); 

UPDATE

この1つはまた、動作していない：

$('#main-menu ul li span').on('click',function(){ 
$(this).find('.dropdown-menu').slideToggle(); 
}); 

共通、それはすることはできませんとても難しい。

jsfiddle

$('#main-menu ul li span:has(.dropdown-menu)') 
.on('click',function(){ 
    $(this).find('ul').slideToggle(); 
}); 

そうでない場合on('click')は何もしていません。

Answer 1

は、私はあなたがこのような何かを書くべきだと思います。