将<ul>转换为<select>并缩进子

Question

我有一个wordpress主题，它使用jQuery转换＆lt; nav＆gt;进入＆lt; select＆gt;用于小屏幕。该脚本创建一个＆lt; select＆gt;在运行中并将其附加到＆lt; nav＆gt;元件。然后我使用CSS来隐藏＆lt; select＆gt;在450px以上的所有东西......这一切都很好。 我需要一些帮助来修改jQuery，以便嵌套的＆lt; ul＆gt;（子项）显示为在＆lt; select＆gt;中缩进元件。 这是HTML （＆lt; select＆gt;在下面用jQuery动态添加）      ＆lt; ul id =＆＃34; menu-main-nav＆＃34;风格=＆＃34;＆＃34;＆GT;     ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;主页＆lt; / a＆gt;＆lt; / li＆gt;     ＆lt; li class =＆＃34; has-children has_submenu＆＃34;＆gt;         ＆lt; a href =＆＃34;＃＆＃34;＆gt; Pages＆lt; / a＆gt;         ＆lt; ul class =＆＃34;子菜单＆＃34; style =＆＃34; display：none;＆＃34;＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;主页图层滑块＆lt; / a＆gt;＆lt; / li＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;主页＆amp; ndash; Lightbox Hero＆lt; / a＆gt;＆lt; / li＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;主页边栏＆lt; / a＆gt;＆lt; / li＆gt;         ＆LT; / UL＆GT;     ＆LT; /锂＆GT;     ＆lt; li class =＆＃34; has-children has_submenu＆＃34;＆gt;         ＆lt; a href =＆＃34;＃＆＃34;＆gt;功能＆lt; / a＆gt;         ＆lt; ul class =＆＃34;子菜单＆＃34; style =＆＃34; display：none;＆＃34;＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;管理员选项面板＆lt; / a＆gt;＆lt; / li＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt; 18页面模板＆lt; / a＆gt;＆lt; / li＆gt;             ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt;主题设计师＆lt; / a＆gt;＆lt; / li＆gt;         ＆LT; / UL＆GT;     ＆LT; /锂＆GT;     ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt; Blog＆lt; / a＆gt;＆lt; / li＆gt;     ＆lt; li＆gt;＆lt; a href =＆＃34;＃＆＃34;＆gt; Shop＆lt; / a＆gt;＆lt; / li＆gt; ＆LT; / UL＆GT; ＆LT;选择＆GT;     ＆lt;选择选项=＆＃34;选择＆＃34; value =＆＃34;＆＃34;＆gt;选择一个页面：＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Home＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Pages＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;主页图层滑块＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Homepage＆amp; ndash; Lightbox Hero＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;主页边栏＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;功能＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;管理员选项面板＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; 18页面模板＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;主题设计器＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;每页样式＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Blog＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Shop＆lt; / option＆gt; ＆LT; /选择＆GT; 我想要＆lt; select＆gt;输出是这样的：     ＆LT;选择＆GT;     ＆lt;选择选项=＆＃34;选择＆＃34; value =＆＃34;＆＃34;＆gt;选择一个页面：＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Home＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Pages＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - 主页图层滑块＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - Homepage＆amp; ndash; Lightbox Hero＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - 首页边栏＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt;功能＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - 管理员选项面板＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - 18页模板＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; - 主题设计器＆lt; /选项＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; -Per-Page Styling＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Blog＆lt; / option＆gt;     ＆lt; option value =＆＃34;＃＆＃34;＆gt; Shop＆lt; / option＆gt; ＆LT; /选择＆GT; 这是jQuery： jQuery（＆＃34;＆lt; select />").appendTo(" ;header nav＆＃34;）; //创建默认选项＆＃34;转到...＆＃34; jQuery（＆＃34;＆lt; option /＆gt;＆＃34;，{    ＆＃34;选择＆＃34;：＆＃34;选择＆＃34;，    ＆＃34;值＆＃34; ：＆＃34;＆＃34;，    ＆＃34;文本＆＃34; ：＆＃34;选择一个页面：＆＃34; }）。appendTo（＆＃34; nav select＆＃34;）; //使用菜单项填充下拉列表 jQuery（＆＃34; nav a＆＃34;）。each（function（）{  var el = jQuery（this）;  jQuery（＆＃34;＆lt; option /＆gt;＆＃34;，{      ＆＃34;值＆＃34; ：el.attr（＆＃34; href＆＃34;），      ＆＃34;文本＆＃34; ：el.text（）  }）。appendTo（＆＃34; nav select＆＃34;）; }）; jQuery（＆＃34; nav select＆＃34;）。change（function（）{   window.location = jQuery（this）.find（＆＃34; option：selected＆＃34;）。val（）; }）; //从桌面菜单中查找当前菜单项 var current_menu_item = jQuery（＆＃39; nav＆＃39;）。find（＆＃39; .current-menu-item＆＃39;）。text（）; //循环浏览移动菜单选项文本，如果匹配上面找到的当前菜单项，则添加所选属性。 jQuery（＆＃34;导航选择选项＆＃34;）。each（function（）{   if（jQuery（this）.text（）== current_menu_item）     jQuery的（本）.attr（＆＃34;选择＆＃34;＆＃34;选择＆＃34）; }）; 我非常感谢您提供的任何指导。非常感谢！ :)

Answer 1

添加到你的jquery

$( "select" ).addClass( "myClass" );
$('.myClass option').prepend("&nbps;&nbps;&nbps;&nbps;");