Develop Reference

Add Tab to existing Tab menu

is it possible to add an Tab to an existing tab menu?
I have a Tab like
<ul class="nav nav-tabs my-tabs" role="tablist"><li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>
<li class="active">Write Mail</li>
<li>Hint</li>
<li>Custom</li>
<li>Mails</li>
<li>Customer Logs</li>
<li>Options</li>
<li>Smartlogs</li>
Is it possible to add a tab with javascript or something else? The Tab is generate by the software herselfe, so I can't add it directly - only with a hook which can insert some code.
Thanks!

Try this like,
$(function(){
$('.my-tabs').append(
'<li>New Tab</li>'
);
});

Angular: How to make an element that will close UI bootstrap dropdown on click

I am using Angular UI with bootstrap and I'm using the uib-dropdown. I have auto-close set to outside click, but I want to also create a button in the dropdown that will close it. I tried adding uib-dropdown-toggle to one of the elements but that broke the drop down completely (it wouldn't open at all). How do I create an element that closes the drop down menu?
Relevant code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>

Just use is-open attribute to control with and angular variable the "openness" of the dropdown. Then you can programmatically set this variable value to false to close the dropdown.
Here is an example from your code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body" is-open="dropdownIsOpen">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default" ng-click="dropdownIsOpen = false">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>

Dynamically added submenu won't toggle - Bootstrap

Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!

Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});

Bootstrap Dropdown doesn't close on clicking link to same page

To preface, sorry if the answer lies in the javascript but I'm currently taking a course online and haven't yet learned javascript so I can't troubleshoot too well there since my understanding is really lacking right now.
I have a bootstrap dropdown menu with nav-pills below. My issue is that when I click a link in my work dropdown and the href links to another spot on the page (single page website) the menu doesn't close out after clicking. If the href is empty with a "#" then it closes out. I can't for the life of me solve this.
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>
</li>
Let me know if I'm missing anything (javascript?) this is my first post.

Not too sure of the source of the problem but this is a nice work-around to forcefully close the dropdown menu.
<script>
//Can go in a sperate .js file as well
function closeDropdowns() {
$(".dropdown-toggle").each(function() {
$(this).attr("aria-expanded", false);
$(this).parent("li").removeClass("open");
});
}
</script>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work</a>
<ul class="dropdown-menu">
<li>
Work 1
</li>
<li>
Work 2
</li>
</ul>

When ever the link is clicked set back the.
aria-expanded to true on the main anchor tag with class dropdown-toggle
$('ul.dropdown-menu li a').on('click',function(){
$(this).closest('li.dropdown').find('a.dropdown-toggle').attr('aria-expanded','false');
});

Bootstrap 3 dropdown in navbar immediately hides after toggle - show

As demonstrated in this jsFiddle, I've a nav bar with 2 dropdowns. A link in the first drop down fires a JS click event where I manually show the second drop down. It works, except that after being shown, the second drop down automatically and immediately hides. I've added an alert to give you time to see the second dropdown before it hides.
http://jsfiddle.net/xNkS5/8/
Copy/paste of the JsFiddle code:
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://toujoursplus.be/">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="DropDown1" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="SwitchLink">Switch to drop down 2</a></li>
</ul>
</li>
<li class="dropdown">
<a id="DropDown2" href="#" class="dropdown-toggle" data-toggle="dropdown">my drop down 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JavaScript
$(document).ready(function() {
$("#SwitchLink").click(function(e) {
e.preventDefault();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
});
In case you wonder why I'm doing that: In our application the DropDown2 shows a login form. Sometimes, clicking the menu link in the DropDown1 should make the login form appear.
jQuery 1.9.1 - Bootstrap 3.0.0
Happens on both Chrome and Firefox.
I'm a Bootstrap newbie, and I'm convinced that I'm doing it wrong. Many thanks for your help.
John.

Try this way:
Stop the event from propagating as well. Otherwise it causes the default dropdown handling of bootstrap from being executed which collapses all the dropdowns when you click on the link.
$(".SwitchLink").click(function(e) {
e.preventDefault();
e.stopPropagation();// prevent the default anchor functionality
$('#DropDown2').dropdown('toggle');
alert("wait here... see DropDown2 deployed, then close this alert and see it's gone.");
});
Fiddle

try to add this script on document.ready. wroked for me.
$(function(){
$("[data-toggle=dropdown]").prop('onclick', null).off('click');
$("[data-toggle=dropdown]").click(function (e) {
e.preventDefault();
e.stopPropagation();
let el = $(this);
let expanded = el.attr("aria-expanded") || false;
if (!expanded) {
$(this).dropdown('toggle');
}
});
});