作为一名 js 菜鸟，我正在与 slider 中的内容负载作斗争。我有 4 个按钮。单击按钮时，我希望打开 slider 并淡入内容。单击另一个按钮时，我希望 slider 保持打开状态，但内容需要淡出并淡入新内容。
我有这个:
HTML
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button href="#" id="expand" class="show-hide">TOGGLE</button>
</div><!--
--><div class="pan-item tr">
<button></button>
</div><!--
--><div class="pan-item bl">
<button></button>
</div><!--
--><div class="pan-item br">
<button></button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a href="#" id="close" class="close">
<i class="icon-cancel"></i></a>
</div>
<h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
</div>
</div>
JS
$(document).ready(function(){
$("#expand").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
$("#close").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
});
这给了我这个结果，打开和关闭
如何添加上面写的我想要的功能？我在面板中加载的内容是 .php 文件。文件1.php，文件2.php，...
最佳答案
我们在 Github 上合作后，我在这里发布了我们迄今为止所做的事情
https://github.com/neodev2/ajax-slide-panel
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
$(document).ready(function(){
var ajaxUrls = [
'snip1.html',
'snip2.html',
'snip3.html',
'snip4.html'
];
var ajaxFiles = [];
for(var i=0; i<ajaxUrls.length; i++){
$.ajax({
method: 'GET',
url: ajaxUrls[i],
success: function(data){
//console.log(data);
ajaxFiles.push(data);
}
});
}
$('.pan-item > button').on('click', function(){
if($('.panel.left').hasClass('open')){
//alert('already open');
}else{
$('.panel.left').addClass('open');
$('.standorte-wrapper').addClass('expand');
}
$('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
});
$('#close').on('click', function(){
$('.panel.left').removeClass('open');
$('.standorte-wrapper').removeClass('expand');
});
});
</script>
<title></title>
</head>
<body>
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button data-ajaxfile="0">X</button>
</div>
<div class="pan-item tr">
<button data-ajaxfile="1">X</button>
</div>
<div class="pan-item bl">
<button data-ajaxfile="2">X</button>
</div>
<div class="pan-item br">
<button data-ajaxfile="3">X</button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
</div>
<div>
<h2>Everything you need to know</h2>
<div id="php-content"></div>
</div>
</div><span class="clear"></span>
</div>
</body>
</html>
关于javascript - 切换、淡入、淡出。打开 slider 并更改内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41230618/