Question

因此，对于我的在线投资组合，我创建了一个选择框作为移动视图上的导航栏。出于某种原因我的代码适用于除“关于”页面之外的每个页面。我的意思是，“关于”页面上的选择框根本不会打开。在其他页面上，它会打开并在您单击时适当地指引您到所选页面。我已经仔细搜索了几个小时的代码，我只是想找一双新的眼睛来帮助我。

HTML CODE

 <header class = "header">
       <h1 class="top">
          <img src="img/logo2.jpg" alt="logo"/> 
       </h1>
       <nav class="container" id="navi">
          <div class="navbar">
             <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li id="about"><a href="about.html">About</a></li>
                <li><a href="data.html">Data</a></li> 
                <li><a href="visual.html">Visual</a></li>
             </ul>
         </div>
         <select>
           <option value="" selected="selected">Select</option>
           <option value="index.html">Home</option>
           <option value="about.html">About</option>
           <option value="data.html">Data</option>
           <option value="visual.html">Visual</option>
          </select>
       </nav>
 </header>

JQUERY CODE

//Create the dropdown base
$("<select />").appendTo("#navi>.navbar>ul");

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

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

//To make the dropdown menu actually work
$("#navi>select").change(function() {
    window.location = $(this).find("option:selected").val();
});

非常感谢。

Answer 1

只想发布任何可能在以后偶然发现的人。

JavaScript工作正常。问题是在“关于”页面上有一个覆盖选择框的HTML元素，这就是我无法点击它的原因。我使用Inspect Element发现了这个，然后我将该HTML元素的z-index更改为负值，以便它位于选择框的下方。

选择框不在关于页面

1 个答案: