jQuery のバージョンが競合するという問題があります。
を使用すると問題が解決すると思ってjQuery.noConflict()いましたが、そうではありません。
2 つの jQuery ライブラリのいずれかを完全に削除すると、もう一方は常に正常に動作します。
以下のコードでわかるように、すべてのページでコードの繰り返しを避けるために、外部の php ファイルをインポートします。私の計画は、Javascript コードもエクスポートすることです (ヘッダーに配置するには多すぎます)。
1 つのページで実行したい 2 つの機能は次のとおりです。
私の（動作していない）コード：
<html>
<head>
<link href="/malark/general/general.css" rel="stylesheet" type="text/css">
<link href="home.css" rel="stylesheet" type="text/css">
<link href="/malark/general/accordion.css" rel="stylesheet" type="text/css">
<link href="/malark/general/jqdock/stackdock.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
jQuery.noConflict();
$(document).ready(function () {
// Stack initialize
var openspeed = 300;
var closespeed = 300;
$('.stack2>img').toggle(function(){
var vertical = 0;
var horizontal = 0;
var $el=$(this);
$el.next().children().each(function(){
$(this).animate({top: vertical + 'px', left: horizontal + 'px'}, openspeed);
vertical = vertical + 55;
horizontal = (horizontal+.75)*2;
});
$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
.find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
$el.animate({paddingBottom: '0'});
}, function(){
//reverse above
var $el=$(this);
$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px'}, closespeed);
$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
$el.animate({paddingBottom: '35px'});
});
// Stacks additional animation
$('.stack2 li a').hover(function(){
$("img",this).animate({width: '56px'}, 100);
$("span",this).animate({marginRight: '30px'});
},function(){
$("img",this).animate({width: '50px'}, 100);
$("span",this).animate({marginRight: '0'});
});
});
</script>
<script type="text/javascript" src="/malark/general/jqdock/jquery.jqDock.min.js"></script>
<script type="text/javascript" src="/malark/general/jqdock/stack-2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
$(document).ready(function() {
//accordeon menu
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.eq(0).addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') !== 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
</script>
<script type="text/JavaScript" src="home.js"></script>
</head>
<body>
<div id="container">
<div id="rightbox">
<?php include $_SERVER["DOCUMENT_ROOT"]."/malark/general/navigation_user.php" ?>
</div>
<div id="cheader">
<img src="../images/logo_EB.gif" alt="logo ING EB"/>
<h2>ING Employee Benefits</h2>
</div>
<div id="csubheader">
<i>user tips appear here</i>
<hr class="horizontal_line" />
</div>
<div id="cbody">
<?php include $_SERVER["DOCUMENT_ROOT"]."/malark/general/stackdock.php" ?>
</div>
</div>
</body>
</html>
ご提案いただきありがとうございます。