添加<span> +</ span>标签<a>标签

Question

的<span> + </span>是外部加入的<a></a>标签里面，我怎么可以让<span>显示在标签内？

这样：

<a>about us <span>+</span></a> 

我的代码：

jQuery(document).ready(function ($) { 
 
\t \t $('.accord ul li:has(ul)').addClass('expand').find('ul').hide(); 
 
\t \t $('.accord ul li.expand>a').after('<span> + </span>'); 
 

 
\t \t $('.accord ul').on('click', 'li.collapse span ', function (e) { 
 
\t \t \t $(this).text(' + ').parent().addClass('expand').removeClass('collapse').find('>ul').slideUp(); 
 
\t \t \t e.stopImmediatePropagation(); 
 
\t \t }); 
 

 
\t \t $('.accord ul').on('click', 'li.expand span', function (e) { 
 
\t \t \t $(this).text(' - ').parent().addClass('collapse').removeClass('expand').find('>ul').slideDown(); 
 
\t \t \t e.stopImmediatePropagation(); 
 
\t \t }); 
 

 
\t \t $('.accord ul').on('click', 'li.collapse li:not(.collapse)', function (e) { 
 
\t \t \t e.stopImmediatePropagation(); 
 
\t \t }); \t \t 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <!-- HTML --> 
 
    <div id="Accord" class="accord"> 
 
     <ul> 
 
     <li><a href='#'>about us</a> 
 
      <ul class='sub'> 
 
      <li><a href='#'>Text</a><ul><li><a>Text</a></li></ul></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div>

Answer 1

在这里，你去了一个解决方案

$(document).ready(function ($) { 
 
    $('.accord ul li:has(ul)').addClass('expand').find('ul').hide(); 
 
    $('.accord ul li.expand>a').append('<span> + </span>'); 
 

 
    $('.accord ul').on('click', 'li.collapse a span ', function (e) { 
 
    $(this).text(' + ').closest('li').addClass('expand').removeClass('collapse').find('>ul').slideUp(); 
 
    e.stopImmediatePropagation(); 
 
    }); 
 

 
    $('.accord ul').on('click', 'li.expand a span', function (e) { 
 
    $(this).text(' - ').closest('li').addClass('collapse').removeClass('expand').find('>ul').slideDown(); 
 
    e.stopImmediatePropagation(); 
 
    }); 
 

 
    $('.accord ul').on('click', 'li.collapse li:not(.collapse)', function (e) { 
 
    e.stopImmediatePropagation(); 
 
    }); \t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Accord" class="accord"> 
 
<ul> 
 
    <li><a href='#'>about us</a> 
 
    <ul class='sub'> 
 
     <li><a href='#'>Text</a><ul><li><a>Text</a></li></ul></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</div>

您需要使用append而不是after和寻找李使用closest('li')代替parent。

而不是遍历使用parent使用closest。

希望这会帮助你。

Answer 2

尝试使用.append（）函数来代替。经过（）。

Append documentation

Answer 3

在你jquery更换after到append使span添加a标签内。并更新您的jquery以使内容也扩大。见下面的代码。

jQuery(document).ready(function ($) { 
 
\t $('.accord ul li:has(ul)').addClass('expand').find('ul').hide(); 
 
\t $('.accord ul li.expand>a').append('<span> + </span>'); 
 

 
\t $('.accord ul').on('click', 'li.collapse span ', function (e) { 
 
\t \t $(this).text(' + ').parents('li').addClass('expand').removeClass('collapse').find('>ul').slideUp(); 
 
\t \t e.stopImmediatePropagation(); 
 
\t }); 
 

 
\t $('.accord ul').on('click', 'li.expand span', function (e) { 
 
\t \t $(this).text(' - ').parents('li').addClass('collapse').removeClass('expand').find('>ul').slideDown(); 
 
\t \t e.stopImmediatePropagation(); 
 
\t }); 
 

 
\t $('.accord ul').on('click', 'li.collapse li:not(.collapse)', function (e) { 
 
\t \t e.stopImmediatePropagation(); 
 
\t }); \t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Accord" class="accord"> 
 
<ul> 
 
    <li><a href='#'>about us</a> 
 
    <ul class='sub'> 
 
     <li><a href='#'>Text</a><ul><li><a>Text</a></li></ul></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</div>