div
特定の で要素をホバーするとスライドする がありID
ます。私はスライドインにjQueryを使用しています.phpファイルへのajax呼び出し( jQueryを使用しない生のajax
呼び出し)によって検索される要素をリストに入力する検索機能があり、データベースを検索してリストに入力します。
div
問題は、自動提案リストのリスト要素がクリックされたときにスライドさせたいことです。jQueryがそれを取得してdivをスライドさせるように、同じID名を簡単に追加するだけでこれを実行できると思いましたが、うまくいかないようです。
どんな提案も役に立ちます。
主な問題は、jQueryがajax呼び出しを介して入力されているリストにある要素の ID を取得しないことです。
Jクエリコード:
$(document).ready(function(){
$(".mirror_content").hide();
$('#mir_way').mouseover(function(){
$('.mirror').stop().animate({width:"1109px", opacity: 1 , margin: "0 235px
0 0"}, 100, function() {
$('.mirror_content').fadeIn('slow');
})
});
$('#mir_way').mouseup(function(){
$('.mirror_content').fadeOut('slow', function() {
$('.mirror').stop().animate({width : "0",opacity : 0.1},100);
});
});
$('#close').click(function(){
$('.mirror_content').fadeOut('slow', function(){
$('.mirror').stop().animate({width : "0",opcaity : 0.1},100);
});
});
$('#close').bind('mouseenter', function() {
$('.mirror').stop().animate({opacity: 0.4} , 400);
}).bind('mouseleave', function(){
$('.mirror').stop().animate({opacity : 1},400);
});
$(window).mouseup(function(e){
if ($('.mirror').has(e.target).length === 0){
$('.mirror_content').fadeOut('slow', function(){
$('.mirror').stop().animate({width:"0", opacity : 0.1},
100);
});
}
});
$(window).keyup(function(event) {
if(event.which === 27) {
$('.mirror_content').fadeOut('slow', function() {
$('.mirror').stop().animate({width:"0", opacity:0.1}, 100);
});
}
});
});
自動提案を設定するphpコード:
<a href="#" id = "mir_way" style = "text-decoration : none;">
<li class = "search_item">
<span class = "search_name"><?php echo $firstname.' '.$lastname.'<br>'; ?></span>
<span class = "sec_line"><?php echo $gender; ?></span>
</li></a>