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

＆＃13;

$(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);
	
		 
	 
	 });

＆＃13;

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% }
}

＆＃13;

<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>

＆＃13;

Answer 2

Elena，我刚刚从您提到的网站上获取了代码并制作了这个小提琴，它确实有效，它确实对链接进行了更改。你在HTML方面缺少一个oppening nav标签，只需要在JS端注释掉append（nav），因为你已经在DOM上了。（在这种情况下，因为您只使用一个下拉列表与网页中的示例不同）

＆＃13;
＆＃13;
// 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(); });
＆＃13;
nav select { display: none; } @media (max-width: 960px) { nav ul { display: none; } nav select { display: inline-block; } }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <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>
＆＃13;
＆＃13;
＆＃13;

将菜单转换为下拉列表

2 个答案: