为什么我的下拉菜单链接不起作用答案

【问题标题】：Why my links for Dropdown menu not working为什么我的下拉菜单链接不起作用
【发布时间】：2017-01-06 05:40:15
【问题描述】：

我使用 jQuery 和 CSS 成功地将我的主菜单转换为小屏幕的下拉菜单，但是链接不起作用！我尝试的一切都没有奏效。我从一个永恒的文件中引用了 jQuery。这是我的代码：

HTML 文件：

$(function(){
  
      $("<select />").appendTo("#menu");
    
    // Create default option "Go to..."
    $("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to..."
    }).appendTo("#menu select");
    
    // Populate dropdown with menu items
    $("#menu a").each(function() {
     var el = $(this);
     $("<option />", {
         "value"   : el.attr("href"),
         "text"    : el.text()
     }).appendTo("#menu select");
    });
    $("#menu select").change(function() {
      window.location = $(this).find("option:selected").val();
    });

  
  
  })

@media (max-width: 960px) {
  #menu ul { display: none; }
  #menu select { display: inline-block; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
        <head>
        
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel=stylesheet href="mystyle.css" type="text/css">
        </head>
        <body>

        <div id="wrapper" > 
    <header id="header1"><a href="index.htm"><img src="images/header.gif"></a></header>
          <div id="menu">
        <ul>
           <li><a href="painting.htm" class="menu">Painting</a></li>
           <li><a href="animation.htm" class="menu">Animation</a></li>
           <li><a href="drawing.htm" class="menu">Drawing</a></li>
           <li><a href="books.htm" class="menu">Books</a></li>
           <li><a href="contact.htm" class="menu">Contact</a></li>
        </ul>
    
        <select> 
            <option value="" selected="selected">Select</option> 
            
            <option value="index.htm">Home</option> 
            <option value="painting.htm">painting</option> 
            <option value="animation.htm">Animation</option> 
            <option value="drawing.htm">Drawing</option> 
            <option value="books.htm">Books</option> 
            <option value="contact.htm">Contact</option> 
          </select> 
        </div>
        
        <div id="content"> 
          <h1>Books</h1>
          
          <div id="main_imgs">
    <A href="pages/painting_00.htm"><IMG src="thumbnails/cover_painting.jpg"></a> 
    <br> <A href="pages/painting_00.htm">Portrait</A>           
          </div>
          
            <script src="jquery.js"></script>
            
           </div>
        <div id="foot">
        <center><p>Copyright &copy 2016.</p></center>
        </div>
        </div>
        </BODY>
        </HTML>

【问题讨论】：

请粘贴 mystyle.css
window.location.href = $(this).find("option:selected").val();
CSS 是 mysetyle.css 文件..
发布工作小提琴。
添加#menu select { display: none; } 之前你的@media选择器

标签： jquery html css drop-down-menu menu

【解决方案1】：

删除 html 上的选择标签

在document.ready上添加你的jquery函数

$(document).ready(function(){
       // Create the dropdown base
$("<select />").appendTo("#menu");

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

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

 #menu select {display: none;}
@media (max-width: 960px) {#menu ul { display: none; } #menu select { display: inline-block; }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" > 
<header id="header1"><a href="index.htm"><img src="images/header.gif"></a></header>
      <div id="menu">
    <ul>
       <li><a href="painting.htm" class="menu">Painting</a></li>
       <li><a href="animation.htm" class="menu">Animation</a></li>
       <li><a href="drawing.htm" class="menu">Drawing</a></li>
       <li><a href="books.htm" class="menu">Books</a></li>
       <li><a href="contact.htm" class="menu">Contact</a></li>
    </ul>

   
    </div>

    <div id="content"> 
      <h1>Books</h1>

      <div id="main_imgs">
<A href="pages/painting_00.htm"><IMG src="thumbnails/cover_painting.jpg"></a> 
<br> <A href="pages/painting_00.htm">Portrait</A>           
      </div>

        <script src="jquery.js"></script>

       </div>
    <div id="foot">
    <center><p>Copyright &copy 2016.</p></center>
    </div>
    </div>

【讨论】：