wie das ist <span> +</ span> Tag innerhalb der <a> Tag

Question

Die <span> + </span> außerhalb des <a></a> Tag hinzugefügt Zugabe, wie kann ich die <span> Show innerhalb des Tags machen?

Auf diese Weise:

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

Mein Code:

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

Hier gehen Sie mit einer Lösung

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

Sie müssen append verwenden, anstatt after und für die Suche nach der li Verwendung closest('li') statt parent.

Anstatt mit parent zu verfahren, verwenden Sie closest.

Hoffe, das wird Ihnen helfen.

Answer 2

Versuchen Sie es mit .append() -Funktion statt .after().

Append documentation

Answer 3

In Ihrem jquery ersetzen die after zu append auf die span innerhalb des a Tag hinzufügen zu machen. Und aktualisiert Ihre jquery, um den Inhalt zu erweitern. Siehe untenstehenden Code.

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>