javascript - jquery幻灯片切换：隐藏+新链接

Question

我应该在下面的jquery中添加什么以使“显示”链接在切换打开后消失并在“blablabla”末尾添加“关闭”链接以便能够关闭切换）（保持缓慢的效果）

jQuery：

var $j = jQuery.noConflict();
$j(function(){
    $j('#containertoggle').on('click', 'a.opener', function(){
        $j(this).next().toggle('slow')
    });
});

HTML：

<ul id="containertoggle">
    <li>
        <a class="opener">show</a>
        <div style="display: none;">
            <p>blablablabla</p>
        </div>
    </li>
    <li>
        <a class="opener">show</a>
        <div style="display: none;">
            <p>blablablabla</p>
        </div>
    </li>
</ul>

Answer 1

试试这个：

var $j = jQuery.noConflict();
$j('#containertoggle').on('click', 'a.opener', function () {
     $j(this).next().toggle('slow').find('p').append('<span> close</span>');
     $j(this).hide();
 });
 $j('#containertoggle').on('click', 'span', function () {
     $j(this).closest('div').toggle('slow').closest('li').find('a').show();
     $j(this).remove();
 });

jsFiddle 示例

Answer 2

你可以试试这个方法。

此外，最好避免将样式添加到style attribute. 改用类。

var $j = jQuery.noConflict();
$j(function () {
    $j('#containertoggle').on('click', 'a.opener', function () {    
        var $this = $j(this);
        $this.next('div').show('slow');
        $this.nextAll('a.closer').first().removeClass('hide');
        $this.addClass('hide');
    });

    $j('#containertoggle').on('click', 'a.closer', function () {       
        var $this = $j(this);
        $this.prev('div').hide('slow');
        $this.prevAll('a.opener').first().removeClass('hide');
        $this.addClass('hide');
    });
});

检查小提琴