jquery: rutscht das Untermenü herunter und klickt dann auf einen Bereich nur auf Bildschirmen, die breiter als 1050px sind

Question

Ich habe ein Menü mit einigen Untermenüs. Meine Bitte wäre: Schiebe (toggle) runter in das Untermenü und klicke dann auf den Bereich und tue es nur auf Bildschirmen, die breiter als 1050px sind. Trick ist - es gibt kein Element span bevor ich "schaffen" es mit diesem Code:

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

vor:

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

nach:

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

bis jetzt gut arbeiten alle. aber als nächstes - nicht.

Code i erstellt, die aber nicht funktioniert natürlich:

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

UPDATE

auch dieser nicht funktioniert:

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

häufig, kann es nicht sein so schwer.

jsfiddle für besseren Überblick.

Answer 1

Ich glaube, Sie so etwas schreiben sollte:

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

Ansonsten ist der on('click') nichts tut.