Изменение триггера jQuery SlideToggle

Question

Я хочу добиться чего-то вроде этого: http://community.invisionpower.com/forum/1-news-and-information/ - когда вы наводите курсор на темы, стрелка появится справа, и щелчок по ней отобразит сводку, и значок стрелки изменится на значок закрытия.

До сих пор я сделал это: http://jsfiddle.net/hfq4U/. Делается так, что когда я нахожу контейнер заголовка, он показывает «Show Summary» (через CSS), и щелчок по нему переключает сводку.

Моя проблема теперь в том, что я не знаю, что положить (или логикой позади нее), чтобы при нажатии «Показать сводку» она изменится на «Скрыть резюме» и по-прежнему останется там если моя мышь покидает контейнер заголовка. This link показывает, чего я хочу достичь.

Любая помощь очень ценится. Кстати, я не хочу использовать какой-либо плагин только для этой функции.

Answer 1

Это ваш код в порядке.

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

Изменить это тоже ..

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     var _currentext = $('.toggler').html(); 
     if(_currentext == "Show Summary") { 
      $('.toggler').html("Hide Summary"); 
     } else { 
      $('.toggler').html("Show Summary"); 
     } 
     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

Надеется, что это работает для вас ..

Answer 2

Вашего HTML

<div class="articles"> 
    <h3>Article Title 1</h3> 
    <div class="summary"> 
     This is the summary for Article 1. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 2</h3> 
    <div class="summary"> 
     This is the summary for Article 2. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 3</h3> 
    <div class="summary"> 
     This is the summary for Article 3. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 4</h3> 
    <div class="summary"> 
     This is the summary for Article a. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

<div class="articles"> 
    <h3>Article Title 5</h3> 
    <div class="summary"> 
     This is the summary for Article 5. 
    </div> 
    <span class="static" style="display:none;">Show Summary</span> 
    <span class="toggler">Show Summary</span> 
</div> 

Вашего Jquery ..

jQuery(document).ready(function($) { 
    $('.toggler').click(function() { 
     var _currentext = $('.toggler').html(); 
     if(_currentext == "Show Summary") { 
      $('.toggler').html("Hide Summary"); 

      $('.static').hide();  
     } else { 
      $('.toggler').html("Show Summary"); 
      $('.static').html("Hide Summary"); 
      $('.static').show();    
     } 

     $('.summary').not($(this).prev()).slideUp(); 
     $(this).prev('.summary').slideToggle('slow'); 
    }); 
}); 

Текст появится под заголовком «Articile Title». Сделайте размещение с вашим CSS сейчас.