Question

我一直在为了一个我无法理解的简单问题而一次又一次地敲打我的脑袋。我有引导下拉列表，当页面加载时当前隐藏了该下拉列表。我已将下拉列表与文本框相关联。下拉列表打开文本框中的键盘功能。打开/关闭下拉菜单没有问题，但问题是下拉列表中的链接因某些原因而无法理解。我用普通按钮尝试了相同的下拉菜单，它工作正常。任何帮助将受到高度赞赏。谢谢。

<!DOCTYPE html>

<head>

<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
.mymenu{
background-color:#efefef;
height:40px;
 box-shadow: 2px 2px grey;
 margin-top:-7px;

}
.mymenu li{
display:inline-block;
padding:10px;
color:#757575;
font-family:lato;

}

#search{
width:400px;
height:26px;    
}

.dropdown-menu > li{
height: 5px;
min-width:300px;
}


a:{
    text-decoration: none;
    color:gray;
}
a:link{
    text-decoration: none;
    color:gray;
}
a:visited{
    text-decoration: none;
    color:gray;
}


</style>
<script>

</script>
</head>
<body>
<div class="mymenu">
<li> Home </li>
<li class="dropdown lgmen">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Top Sellers </a>
<ul class="dropdown-menu">
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li> 
      </ul>
      </li>
<li class="dropdown lgmen">
<input type="text" name="search" id="search" placeholder="Search Keyword..." autocomplete="off">

<ul class="dropdown-menu" id="mydrp" style="margin-left:10px;margin-right:10px;margin-top:-10px;">
            <li><a href="http://www.google.com">Google</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a></li> 
            </ul>


 </li>


</div>

<script>

$("#search").keyup(function (event) {
   //preventing default behaviour of bootstrap
    event.stopPropagation();

    $("#mydrp").dropdown().show("slow");
    var ab=$("#search").val();
    if(ab == ""){
    $("#mydrp").dropdown().hide("slow");
    }
});




</script>
</body>
</html>

Answer 1

代码中的一些问题 - 您没有声明<html> - 并且您没有将该函数包装在文档就绪中。并且您没有正确关闭您的嵌套文件。

$(document).ready(function(){
  $("#search").keyup(function() {
    $("#mydrp").show("slow");
    var ab=$("#search").val();
    if(ab == ""){
    $("#mydrp").hide("slow");
    }
  });
});

.mymenu{
background-color:#efefef;
height:40px;
 box-shadow: 2px 2px grey;
 margin-top:-7px;

}
.mymenu li{
display:inline-block;
padding:10px;
color:#757575;
font-family:lato;
}

#search{
width:400px;
height:26px;    
}

.dropdown-menu > li{
height: 5px;
min-width:300px;
}


a:{
    text-decoration: none;
    color:gray;
}
a:link{
    text-decoration: none;
    color:gray;
}
a:visited{
    text-decoration: none;
    color:gray;
}

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="mymenu">
    <ul>
      <li> Home </li>
      <li class="dropdown lgmen">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Top Sellers </a>
         <ul class="dropdown-menu">
            <li><a href="http://www.google.com">Google</a></li>
            <li><a> href="http://www.yahoo.com">Yahoo</a></li> 
        </ul>
      </li>
      <li class="dropdown lgmen">
        <input type="text" name="search" id="search" placeholder="Search Keyword..." autocomplete="off"/>
        <ul class="dropdown-menu" id="mydrp" style="margin-left:10px;margin-right:10px;margin-top:-10px;">
          <li><a href="http://www.google.com">Google</a></li>
          <li><a href="http://www.yahoo.com">Yahoo</a></li> 
        </ul>
      </li>
   </ul>
</div>
</body>
</html>

Answer 2

错误

$("#mydrp").dropdown.show();

右

$("#mydrp").show();

Jquery显示/隐藏功能不起作用

2 个答案: