2016-08-04 8 views
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(); 

答えて

0

$('.close')

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

希望にクリック機能の結合を変更してみてください、助け。確かに!

関連する問題