Jquery Show/Hide機能が動作しない

私は理解できない単純な問題のために何度も頭を叩いています。私は、ページが読み込まれるときに現在隠されているブートストラップのドロップダウンを持っています。ドロップダウンをテキストボックスにリンクしました。ドロップダウンは、テキストボックスのキーアップ機能で開きます。ドロップダウンの開閉に関する問題はありませんが、ドロップダウンのリンクが何らかの理由で機能していないことが分かりません。私は通常のボタンで同じドロップダウンを試して、それは正常に動作します。どんな助力も高く評価されます。ありがとうございます。Jquery Show/Hide機能が動作しない

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

出典

2016-11-17 Francisco

あなたのコードを投稿.. – Pranjal

@franciscoペーストコード –

こんにちはPranjal、Hudhaifa、私はstackoverflowの上でここに新しいですとコードを貼り付ける方法を知りませんでした。私はちょうどコードで自分の投稿を編集しました。ありがとうございました。 – Francisco

間違っ

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

右

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

出典

2016-11-17 14:18:14 Francisco

コードと問題のカップル - あなたは<html>を宣言されていません - あなたは、ドキュメント内の関数をラップしていないが、あなたの巣のUL李さん正しく閉鎖されていませんready.And。

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

出典

2016-11-17 07:46:57 gavgrif

こんにちはGavgrif、助けてくれてありがとう。私はあなたが言った方法を試みたが、私の問題を解決しなかった。しかし、私はコードのバグを見つけました。 – Francisco

Jquery Show/Hide機能が動作しない

答えて

関連する問題