Javascript jquery滑动切换:隐藏+;新链接

Javascript jquery滑动切换:隐藏+;新链接,javascript,jquery,html,slidetoggle,Javascript,Jquery,Html,Slidetoggle,我应该在下面的jquery中添加什么,以便在切换打开后将“show”链接添加到disapear,并在“blabla”的末尾添加一个“close”链接,以便能够关闭切换(保持慢速效果) jQuery: var $j = jQuery.noConflict(); $j(function(){ $j('#containertoggle').on('click', 'a.opener', function(){ $j(this).next().toggle('slow')

我应该在下面的jquery中添加什么,以便在切换打开后将“show”链接添加到disapear,并在“blabla”的末尾添加一个“close”链接,以便能够关闭切换(保持慢速效果)

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>
  • 显示 布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

  • 显示 布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

试试这个:

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();
 });
var$j=jQuery.noConflict();
$j(“#containertoggle”)。在('click','a.opener',函数(){
$j(this).next().toggle('slow').find('p').append('close');
$j(this.hide();
});
$j('#containertoggle')。在('click','span',function(){
$j(this).closest('div')。toggle('slow')。closest('li')。find('a')。show();
$j(this.remove();
});

您可以尝试这种方法

另外,最好避免将样式添加到
样式属性
。改用类

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

谢谢!它可以工作,但我只需要在第一行后面添加$j(function(){)