Question

我希望实现这样的目标：http://community.invisionpower.com/forum/1-news-and-information/ - 当您将鼠标悬停在主题上时，右侧会出现一个箭头，点击它会显示摘要，箭头图标将变为关闭图标。

到目前为止，我已经制作了这个：http://jsfiddle.net/hfq4U/。做的是当我悬停标题容器时，它显示“显示摘要”（通过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进行展示位置。

jQuery SlideToggle触发器更改

2 个答案: