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