Question

我应该在下面的jquery中添加什么，以便在切换打开后获取“show”链接到disapear并在“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 example

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

<强> Check Fiddle

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

2 个答案: