ドロップダウンメニューのリンクが機能しない理由

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>

出典

2017-01-06 Rose

貼り付けてくださいmystyle.css –

'window.location.href = $（この）.find（ "オプション：選択"）のval（）;' – Jai

CSSがmysetyle.cssファイル..です – Rose

document.ready

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

であなたのjqueryの機能を追加するには、HTMLに

をselectタグを削除します

出典

2017-01-06 05:48:30

ドロップダウンメニューのリンクが機能しない理由

答えて

関連する問題