2013-05-15 5 views
6

さまざまな理由から、指定した高さが&オーバーフローのアコーディオンを作成しました。しかし、私が必要なボタンをクリックすると、崩壊することはできません。jquery altアコーディオンが閉じない

これは、関連するJSです:

$(document).ready(
    function(){ 
     $('li.ww_slides').addClass('livequery').append('<span class="nav"></span>'); 
     $("li.ww_slides").click(function() { 
      $('li.ww_slides').removeClass('active'); 
      $(this).addClass('active'); 
      $('span.nav').addClass('open').css('bottom','0'); 
     }); 

     $("span.open").click(function() { 
      $(this).parent().removeClass('active'); 
     }); 
    } 
); 

これは、関連するCSSです:私はli.ww_slidesが関連span.nav.openのクリックで閉じてもらうにはどうすればよい

.ww_main_preview ul li.active { margin-bottom: 10px; padding-bottom: 10px; height: auto!important; } 
.ww_main_preview ul li.active span.nav { background-position: top center; } 
.ww_main_preview ul li.livequery { overflow: hidden; height: 76px; margin-bottom: 10px; padding-bottom: 10px; } 

答えて

4

あなたはクリックハンドラ内のクラスを変更しているとして、あなたはイベントを委任する必要があります

$("li.ww_slides").on("click", "span.open", function() { 
    $(this).parent().removeClass('active'); 
}); 

または:エレガントな応答のための

$(document).ready(function(){ 
    $('li.ww_slides') 
      .addClass('livequery') 
      .append('<span class="nav"></span>') 
      .click(function() { 
       $('li.ww_slides').removeClass('active'); 
       $('span.nav').removeClass('open'); 
       $(this).addClass('active') 
        .find('.nav') 
        .addClass('open') 
        .css('bottom','0'); 
      }).on('click', 'span.open', function(event) { 
       event.stopPropagation(); 
       $(this).parent().toggleClass('active'); 
      }); 
}); 
+0

感謝を。私はそれが動作するように見えることはできません。何か不足していますか?最初のクリックが全体のリにあるので、そのスパン内のクリックをピックアップしていない可能性がありますか? – cdb

+0

@cdbあなたは歓迎されています。私が知る限り、http://jsfiddle.netでデモを提供できますか? – undefined

+0

ここに行きます:http://jsfiddle.net/Rtstc/ Thanks – cdb

関連する問題