如何使用Append Jquery

Question

我希望 DorodownmenuList 追加按钮......
我想要 this

1. 第一步，我希望 > EM>

2. dropdownmenu 后隐藏。

HTML

<div class="input-group-btn">

 <button class="btn" data-toggle="collapse">
    <span class="current" data-url="">Submenu1</span> <span class="right">&nabla;</span>
 </button>

 <ul id="categories" class="dropdown-menu">
    <li><a href="#" class="unicode ieUnicode">Submenu2</a></li>
    <li><a href="#" class="unicode ieUnicode">Submenu3</a></li>
    <li><a href="#" class="unicode ieUnicode">Submenu4</a></li>
    <li><a href="#" class="unicode ieUnicode">Submenu5</a></li>
    <li><a href="#" class="unicode ieUnicode">Submenu6</a></li>
 </ul>

</div>

CSS

 .input-group-btn{
    position:relative;
 }
 .btn{
   width:300px;
   background-color:#ddd;
   color:red;
   border:1px solid #ccc;
   padding:10px;
   font-size:20px;
   text-align:left;
   cursor:pointer;
 }
.btn .right{
   color:#fff;
   background-color:#000;
   border-radius:50%;
   display:inline-block;
   padding:0 5px;
  float:right;
}
.dropdown-menu{
   background-color: #ddd;
   border: 1px solid #ccc;
   list-style: none outside none;
   padding: 0;
   position: absolute;
   top: 34px;
   width: 300px;
   display:block;
   display:none;

 }

jquery的

$('.btn').click(function(){
    $(this).parent().addClass('open');
   //how use li appendto btn and dropdown-menu is hide

}）;

这就是我想要的。如何使用jquery ..

1. 当我点击 Submen2 时，附加 按钮



1. 当我点击 Submen3 时，它会附加 按钮



SEE DEMO

Answer 1

试试这个： -

$('.btn').click(function(){
$(this).parent().addClass('open');
//how use li appendto btn and dropdown-menu is hide
});
$('#categories li').click(function(){
   $('#categories li').find('.right').remove();
   if($(this).find('.right').length<=0)
   {
   $(this).append('<span class="right">∇</span>');
   }
 });

Demo

编辑更新的问题： -

$('.btn').click(function(){
$(this).parent().addClass('open');
//how use li appendto btn and dropdown-menu is hide
});
$('#categories li').click(function(){
  $('.input-group-btn').removeClass('open');
  $('.current').text($(this).find('a').text());
});

Answer 2

$('.btn').click(function(){
    $(this).parent().addClass('open');
    //how use li appendto btn and dropdown-menu is hide
});
$('.dropdown-menu li').click(function(){
    $(this).append('<span class="right">∇</span>');

});

.btn .right, li .right{
    color:#fff;
    background-color:#000;
    border-radius:50%;
    display:inline-block;
    padding:0 5px;
    float:right;
}

不要忘记喜欢它是否有帮助