的jQuery的slideToggle触发更改

我要实现的是这样的：http://community.invisionpower.com/forum/1-news-and-information/ - 当你将鼠标悬停在主题，箭头就会出现在右侧，点击它会显示摘要和箭头图标会变成一个关闭图标。的jQuery的slideToggle触发更改

到目前为止，我已经提出了这一个：http://jsfiddle.net/hfq4U/。所做的是，当我悬停标题容器时，它显示“显示摘要”（到CSS），然后单击它将切换摘要。

我现在的问题是，我不知道要放什么东西（或者背后的逻辑），以便单击“显示摘要”时，它会改变为“隐藏摘要”，将仍然存在，即使如果我的鼠标离开标题容器。 This link显示我想要达到的目标。

任何帮助，非常感谢。顺便说一句，我不想只为这个功能使用任何插件。

来源

2012-03-02 bloggerious

这是你的代码正确。

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'); 
    }); 
});

希望工程罚款你..

来源

2012-03-02 15:05:24

它从“显示...”更改为“隐藏...”，但当鼠标离开每个物品容器时，“隐藏摘要”文本将消失。我希望“隐藏摘要”将保留在那里，直到我将其隐藏。 – bloggerious 2012-03-02 15:17:13

你的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放置。

来源

2012-03-13 12:55:25

的jQuery的slideToggle触发更改

回答

相关问题