我想DorodownmenuList是追加按鈕......
我想this如何使用jQuery的追加

第一步，我想UL李被追加到按鈕當它是點擊。
後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 ..

當我點擊Submen2
它是附加按鈕

enter image description here

當我點擊Submen3
是追加按鈕

enter image description here

SEE DEMO

來源

2014-07-22 theinlwin

u能解釋一下你的問題again.What難道是你想要什麼？ –

你想從上一個選擇中刪除按鈕嗎？ –

是的！我想li是appendTo .btn Class。它是同樣的listBox .. – theinlwin

試試這個： -

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

來源

2014-07-22 07:47:02

嘿朋友。這是我想要的。 http://www.bootply.com/pVSNrNpOcM – theinlwin

@theinlwin像這樣http://jsfiddle.net/gpj9f/6/？ –

是的。我的朋友。這是我想要的。 – theinlwin

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

不要忘了一樣，如果它是有益的

來源

2014-07-22 07:41:50

請給我提琴示例 – theinlwin

只是去你的小提琴代碼替換上面的代碼jquery代碼和編輯.btn .right類和添加li.right ..我已經測試它在小提琴但忘記保存 –

你好朋友，我的問題更新了。接下來看。 – theinlwin

如何使用jQuery的追加

SEE DEMO

回答

相關問題