javascript - 将菜单转换为下拉菜单

Question

我正在尝试将菜单转换为下拉菜单以在移动版本中使用

我找到了一个网站，其中解释了如何将菜单转换为下拉菜单，并且我成功地在页面中添加了下拉菜单，但我遇到的问题是 JavaScript 不起作用。单击不同的选项不会更改页面。

HTML:

<nav>
    <nav id="menu">
        <ul>
            <li><a href="indexoriginal.html">Home</a></li>
            <li><a href="#">Bio</a>
                <ul>
                    <li><a href="aboutme.html">Biography</a></li>
                    <li><a href="repertoire_english.html">Repertoire</a></li>
                </ul>
            </li>   
            <li><a href="#">Gallery</a>
                <ul>
                    <li><a href="media.html">Media</a></li>
                    <li><a href="photosgeneral.html">Photos</a></li>
                </ul>
            </li>    
            <li><a href="agenda_english.html">Agenda</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <select>                    
            <option value="/" selected="selected">Home</option> 
            <option value="aboutme.html">Biografía</option> 
            <option value="repertoire_english.html">Repertorio</option> 
            <option value="media.html">Media</option> 
            <option value="photosgeneral.html">Fotos</option> 
            <option value="agenda_english.html">Agenda</option>
            <option value="contact.html">Contact</option>
        </select>* 

    </nav>

这是我放入 html 文档中的 JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

<script>

    //DOM ready
    $(function(){
        // Create the dropdown base
        $("<select />").appendTo("nav");

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav select");

        // Populate dropdown with menu items
        $("nav a").each(function() {
            var el = $(this);
            $("<option />", {
            "value"   : el.attr("href"),
            "text"    : el.text()
        }).appendTo("nav select");
    });

    $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
</script>

以及我引用的代码的网页:https://css-tricks.com/convert-menu-to-dropdown/

Answer 1

$(function() {
	   var $newDiv = $("<div/>").addClass("headmenu")
                 ;
      // Create the dropdown base
	  $($newDiv).appendTo("nav");
      $("<select />").appendTo($newDiv);
      
      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
		 
         "value"   : "",
         "text"    : "&#9776;",
		 "label" : "User Menu"
      }).appendTo("nav select");
      
      // Populate dropdown with menu items
      $("nav ul a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      
	   // To make dropdown actually work
	   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
		$("nav option:selected").text('');
      });
	 $("nav option:selected").attr('disabled',true);
	
		 
	 
	 });

nav select {
  display: none; 
}
/*adjust css for your screen size eg for mobile 600 or 480*/

@media (max-width:980px) {
  nav ul     { display: none; }
  nav select { display: block;width:70% }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<nav>
    
        <ul>
            <li><a href="indexoriginal.html">Home</a></li>
            <li><a href="#">Bio</a>
                <ul>
                    <li><a href="aboutme.html">Biography</a></li>
                    <li><a href="repertoire_english.html">Repertoire</a></li>
                </ul>
            </li>   
            <li><a href="#">Gallery</a>
                <ul>
                    <li><a href="media.html">Media</a></li>
                    <li><a href="photosgeneral.html">Photos</a></li>
                </ul>
            </li>    
            <li><a href="agenda_english.html">Agenda</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        

    </nav>