アコーディオンメニューによる今日の欧州債務危機ニュース

[houbokusiさん]

ul.acc, ul.acc li ul {
margin: 0;
padding: 0;
list-style: none;
}

ul.acc a{
display: block;
line-height: 30px;
color: #aaaaaa;
}

ul.acc {
background-color: #ddd;
}

ul.acc li ul {
background-color: #eee;
}



var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide();

$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
return false;
});
});
});
});


function setBackground() {
var $last = j$(".acc > li:last > a");
if($last.hasClass("close"))
$last.css("background-position", "left bottom");
else
$last.css("background-position", "left -30px");
}

j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0)
$this.addClass("close").next().hide();
else
$this.css("background-position", "left top");

setBackground();

var params = {height:"toggle", opacity:"toggle"};
$this.click(function(){
j$(this).toggleClass("close").next().animate(params)
.parent().siblings().children("ul:visible")
.animate(params).prev().addClass("close");
setBackground();
return false;
});
});
});


メニューは、出典：『jQueryでアコーディオンメニューを作成する』より転載させて頂きました。
今日の欧州債務危機ニュースは、ちょっと今後が気になる展開になってきたかと思い、まとめてみました。
続きを読む