Question

我在jquery中寻找可扩展的投资组合解决方案并遇到了我喜欢的fiddle，除了它缺少扩展部分的关闭按钮。所以我尝试在更新的fiddle中添加一个带有简单的slideUp（）jquery函数的按钮，但该按钮不起作用。最令人好奇的是，我试图在div之外放置完全相同的按钮，它就像一个魅力。我还尝试通过使用this（）和parent（）为扩展元素内的按钮更改close函数逻辑来解决问题。

标记：

      <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();

Answer 1

尝试更改$('.close')

上点击功能的绑定

$('.portfolio').on('click', '.close', function() {
  $details.slideUp();
})

希望，这有帮助。虽然不确定！

展开式div中的SlideUp关闭按钮无响应

1 个答案: