rozwijany pasek rozruchowy Twitter nie przełącza się, gdy powinien
O rany, wyrywałem sobie z tego włosy. 4 godziny na liście rozwijanej.
Używam Twitter Bootstrap.
Stały nawigator na górze ma rozwijane, całkiem standardowe rzeczy.
Z wyjątkiem tego, że lista rozwijana nie jest zamykana, jak zwykle. Otworzy się i zamknie tylko po naciśnięciu przełącznika, a nie po naciśnięciu elementu w menu lub kliknięciu przez użytkownika poza menu (oba powinny zamknąć menu rozwijane).
Jedyne, co robię niestandardowo, to użycie iframe i motywu z bootwatch.
Nie miałem wcześniej takiego problemu, więc mam wrażenie, że może to być błąd (zaktualizowany bootstrap do wersji 2.1.0 i jquery do 1.7.2 dzisiaj).
cały kod tutaj:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<style>
iframe {
border: 0px;
height: 95%;
left: 0px;
position: absolute;
top: 50px;
width: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" target="mainframe" href="./home.html">
Brand
</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">
<i class="icon-pencil icon-white"></i>
Sample
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a target="mainframe" href="./home.html#">One</a>
</li>
<li>
<a target="mainframe" href="./home.html#">Two</a>
</li>
<li>
<a target="mainframe" href="./home.html#">Three</a>
</li>
<li>
<a target="_blank" href="#">Four
<i class="icon-share-alt"></i>
</a>
</li>
<li>
<a target="_blank" href="#">Five
<i class="icon-share-alt"></i>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-certificate icon-white"></i>Stuff</a></li>
<li>
<a href="#">
<i class="icon-globe icon-white"></i>Things</a></li>
<li>
<a target="mainframe" href="./home.html">
<i class="icon-film icon-white"></i>Nothing</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<iframe id="frame" name="mainframe" src="./home.html"></iframe>
<!-- /container -->
</div>
<!-- Le javascript==================================================-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
var frameheight = window.innerHeight - 50;
document.getElementById("frame").style.height = frameheight + "px";
});
$(window).resize(function () {
var frameheight = window.innerHeight - 50;
document.getElementById("frame").style.height = frameheight + "px";
});
</script>
</body>
</html>
żyć tutaj:http://www.joshlevent.com/dropdownbug/