Question

The <span> + </span> is added outside of the <a></a> tag, how can I make the <span> show inside the tag?

In this way:

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

My code:

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

您可以使用解决方案

＆＃13;

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

＆＃13;

<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>

＆＃13;

您需要使用append代替after并使用closest('li')代替parent。

而不是使用parent遍历closest。

希望这会对你有所帮助。

Answer 2

尝试使用.append（）函数代替.after（）。

Append documentation

Answer 3

在jquery中，将after替换为append，以便在span标记内添加a。并更新了您的jquery以扩大内容。见下面的代码。

jQuery(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 span ', function (e) {
		$(this).text(' + ').parents('li').addClass('expand').removeClass('collapse').find('>ul').slideUp();
		e.stopImmediatePropagation();
	});

	$('.accord ul').on('click', 'li.expand span', function (e) {
		$(this).text(' - ').parents('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>

例如在<a> tag

3 个答案: