MySql データベースから入力された動的メニューがあります。このメニューの項目の 1 つがクリックされると、Ajax リクエストが作成され、それに応じて、Ajax リクエストに渡された ID に基づいてツリー構造 (それぞれのサブカテゴリを含む製品カテゴリ) が強調表示されます。
メニューは単純に維持され<ul><li></li></ul>、マウス ボタンがメニュー上の項目の 1 つに置かれると、子項目をポップアップ (ドロップダウン) するためにいくつかの jQuery 関数が呼び出されます。うまくいく。
何らかの理由で、同じタイプのメニューを同じページに表示する必要があります (これらのメニューの 1 つだけが Ajax を使用しています。残りは Ajax を使用する必要はありません)。
問題は、jQuery 関数を読み込んでメニュー項目を個別にポップアップする必要があることです。ページの読み込みで 1 回、Ajax リクエストでもう一度。それ以外の場合、メニューはポップアップしません。その結果、ブラウザで 2 つの JavaScript がアクティブになり、同じページの残りのメニューが正しく表示されないように思われます。
マウスボタンがホバーされている場合に注意してください。Ajax 要求が行われない場合 (上記の Ajax 呼び出しを使用する唯一のメニューを介して)、すべてのメニューが適切に表示されます。
私の言いたいことを理解していただけると幸いです。申し訳ありませんが、質問をこれ以上明確にすることはできません。なぜこれが起こるのですか？これに対する解決策はありますか。
編集：
メニューをポップアップするために使用されるこのjQueryコードがあります。
var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}
var jqueryslidemenu_new={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu_new:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
$mainmenu.find("ul li").css({zIndex:'99999'})
}) //end document.ready
}
}
<script></script>ページのロード時に使用されるタグの src 属性を使用して、同じ jQuery が既にインポートされています。
これは Ajax 呼び出しを使用する関数です。
function getParentId(parentId)
{
$.ajax({
datatype:"html",
type: "GET",
url: "ajax/ParentId.php",
data: "ed_id=" + parentId+"&t="+new Date().getTime(),
success: function(response)
{
$('#originalMenu').html(response);
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
// The above function is called from here.
},
error: function(e)
{
alert('Error: ' + e);
}
});
document.getElementById("txt_parent").value=parentId;
}
編集：
以下は、js を含む完全な HTML コードです (デモンストレーションのためだけに)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
<script type="text/javascript" language="javascript">
//This code is used to pop up menu after an Ajax request is made.
//On page load, exactly the same code which is an external js in on of preceding script tags is used.
var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}
var jqueryslidemenu_new={
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu_new:function(menuid, arrowsvar){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left, top:$(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
$mainmenu.find("ul li").css({zIndex:'99999'})
}) //end document.ready
}
}
//This function just sends an Ajax request.
function getParentId(parentId)
{
$.ajax({
datatype:"html",
type: "GET",
url: "ajax/ParentId.php",
data: "ed_id=" + parentId+"&t="+new Date().getTime(),
success: function(response)
{
$('#originalMenu').html(response);
jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
//This calls the above function to pop up the menu.
},
error: function(e)
{
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<form action="" id="dataForm" name="dataForm" method="post">
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" class="menu"><div id="header_top_menu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>
<div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 1</div>
<ul>
<li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
<ul>
<li><a href="#" onclick="getParentId(21); return false;">Child Item 1</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 2</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 3</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 4</a></li>
<li><a href="#" onclick="getParentId(20); return false;">Child Item 5</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div></td>
</table>
<br/><br/><br/><br/><br/>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle" class="menu"><div id="header_top_menu">
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li>
<div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 2</div>
<ul>
<li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
<ul>
<li><a href="#">Child Item 1</a></li>
<li><a href="#">Child Item 2</a></li>
<li><a href="#">Child Item 3</a></li>
<li><a href="#">Child Item 4</a></li>
<li><a href="#">Child Item 5</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div></td>
</table>
</form>
</body>
</html>
この HTML は 2 つのメニューと を表示Menu 1しますMenu 2。アイテムがMenu 1クリックされると、このデモでは何もしない URL に Ajax リクエストが送信されます。Ajax リクエストが行われる前に、両方のメニューが適切に表示されます。メニュー 1を以下に示します。
メニュー 2は次のように表示されます (メニュー 1 と同じ)。
メニュー 1は、 のアイテムMenu 1がクリックされたときに発生する Ajax リクエストを送信する役割を果たします (この場合は何もしません。この場合、この Ajax リクエストが送信されるページは完全に空白のままです。これは単なるデモンストレーションです)。
どちらの場合も、マウス ポインタを の上に置くと、 .....Menu Item 1を含むサブ メニューが開きます。Child Item 1Child Item 5
Ajax リクエストが行われた後、 にカーソルを合わせるとMenu Item 1、Menu 2正しく機能せず、次のようになります。
Menu Item 1オンにするとMenu 2、その親メニューの最後のサブメニュー( )が一度に表示されます。なぜこれが起こるのですか？Menu Item 1
メニューをポップアップするために使用されるページ読み込み時のjsコードは、次のようにインポートされたコードに記載されています。
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
これは、コード スニペットで言及されている js コードとまったく同じです。このスニペットの js コードは、Ajax リクエストが行われた後にメニューをポップアップするために使用されます。
念のため、CSSが必要な場合は、次のタグでリンクされた次のとおりです。
<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />
.jqueryslidemenu{font:bold 9px Tahoma, Verdana, sans-serif;color:#fff;width: 100%;text-align:left;z-index:99999}
.jqueryslidemenu ul{margin: 0;padding: 0px;list-style-type: none;z-index:99999}
.jqueryslidemenu ul li{position: relative;display: inline;float: left;z-index:auto}
.jqueryslidemenu ul li a{font:bold 12px Tahoma, Verdana, sans-serif;display: block;background:#000;color: #fff;padding: 3px 3px;text-decoration: none;z-index:99999}
* html .jqueryslidemenu ul li a{display: inline-block;z-index:99999}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: #fff;text-decoration: none;z-index:99999}
.jqueryslidemenu ul li a:hover{background:#000;text-decoration:none;color: #03C;z-index:99999}
.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;z-index:99999}
.jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:99999}
.jqueryslidemenu ul li ul li ul{top:0;z-index:99999}
.jqueryslidemenu ul li ul li a{font:bold 9px Tahoma, Verdana, Geneva, sans-serif;width: 140px;margin: 0;padding: 6px;border-top-width: 0;border-bottom: 1px solid gray;z-index:99999}
.jqueryslidemenuz ul li ul li a:hover{color:#fff; background:#000;z-index:99999}
.downarrowclass{position: absolute;top: 8px;right: 7px;display:none;z-index:99999}
.rightarrowclass{position: absolute;top: 6px;right: 5px;z-index:99999}