0
jqueryで拡張可能なポートフォリオソリューションを探していて、拡張セクションの閉じるボタンがないことを除いて、好きなfiddleを見つけました。 私は単純なslideUp()jquery関数を更新したfiddleでボタンを追加しようとしましたが、ボタンは機能しません。それについて最も興味をそそられているのは、divの外側に全く同じボタンを配置しようとしたところ、魅力的に機能しているということです。私はまた、この要素を閉じた関数のロジックを、展開された要素の中にあるボタンのthis()とparent()で変更して、問題を解決しようとしました。拡張されたdivのSlideUpクローズボタンが反応しません
マークアップ:
<div id="portfolio">
<a class="close"> close </a>
<div class="row">
<div class="item" data-rel="0">1</div>
<div class="item" data-rel="1">2</div>
<div class="item" data-rel="2">3</div>
</div>
<div class="details"></div>
<div class="row">
<div class="item" data-rel="3">4</div>
<div class="item" data-rel="4">5</div>
<div class="item" data-rel="5">6</div>
</div>
<div class="details"></div>
<ul id="portfolio-details">
<li>
<a class="close"> close </a>
<p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</li>
<li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
<li>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</li>
<li>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
</ul>
のjQuery:
はvar Portfolio = {
Elements: {
items: $('div.item', '#portfolio'),
details: $('#portfolio-details', '#portfolio')
},
fn: {
select: function() {
Portfolio.Elements.items.each(function() {
var $item = $(this);
var $row = $item.parent();
var $details = $row.next('div.details');
var $li = $('li', Portfolio.Elements.details);
var $close = $('.close');
$item.click(function() {
$('div.details').hide();
$details.empty();
var $html = $li.eq($item.data('rel')).html();
$details.html($html).slideDown(600);
$('html, body').animate({
scrollTop: 0
}, 0).animate({
scrollTop: $details.offset().top
}, 300);
});
$close.click(function() {
$details.slideUp();
});
});
}
}
};
Portfolio.fn.select();