下矢印をクリックすると、最初のリンクの背景が赤に変わるようにしようとしています。何か問題があります。矢印キーを押したままにすると、赤くなるだけです。一度赤く光った後、白に戻ります。デフォルトに戻した直後に何らかのイベントが発生したかのようです。私はまだ JQuery を学んでいるので、そこに問題があるのではないかと思います。色々と考えてみたのですが、未だにこれが思いつきません。誰かが私の問題を見つけることができれば、本当に感謝しています。ありがとう!
これが私のJQueryです:
<script type="text/javascript">
$(document).ready(function() {
$(document).click(function() {
$("#SearchResults").hide();
});
$("#SearchInput").keydown(function(e) {
if(e.which == 8) {
SearchText = $("#SearchInput").val().substring(0, $("#SearchInput").val().length-1);
} else if (e.keyCode == 40) { //down
var curr = $("#SearchResults").find("a.selected");
if (curr.length == 0) {
curr = $("#SearchResults").find("a:first");
}
} else {
SearchText = $("#SearchInput").val() + String.fromCharCode(e.which);
}
$('#SearchResults').load('/ajaxPHP/ajaxSearch.php',{ SearchInput: SearchText }, function() {
curr.addClass('selected');
});
$("#SearchResults").slideDown();
});
});
</script>
Here is my CSS
#SearchInput {
width:340px;
height:24px;
margin-top:15px;
border:none;
padding-left:12px;
padding-right:10px;
color:#333;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-repeat: no-repeat;
background-color:#fff; /* Fallback */
-moz-box-shadow: inset 0 2px 1px 1px #363636;
-webkit-box-shadow: inset 0 2px 1px 1px #363636;
box-shadow: inset 0 2px 1px 1px #363636;
}
#SearchResults {
float:left;
position:fixed !important;
background: #fff;
border:1px solid #333;
display: none;
width: 360px;
z-index: 9999 !important;
top:40px;
max-height:420px;
color:#333;
margin-left:9px;
}
#SearchResults h1 {
display: block;
padding: 10px 5px 10px 15px;
font-size:13px;
font-weight:bold;
color:#333;
border-top:1px solid #999;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
#SearchResults a {
z-index: 9999 !important;
color: #333;
font-size:13px;
display: block;
padding: 15px 5px 15px 15px;
text-decoration: none;
}
#SearchResults a:hover {
z-index: 9999 !important;
color: #fff;
background: #999;
text-decoration: underline;
}