jquery - 例如在 标签内添加 + 标签

Question

<span> + </span>在 <a></a> 之外添加标签，我怎样才能制作<span>显示在标签内？

这样:

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

我的代码:

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

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

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

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

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

<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 并且要找到 li 使用 closest('li') 而不是 parent 。

与其使用 parent 遍历，不如使用 closest。

希望对您有所帮助。