0

ドロップダウンとトグルボタンが機能しないようです。多くの人がその問題に遭遇したことは知っていますが、まだ解決策を見つけていません。

<!DOCTYPE HTML>
<HTML>
    <head>
        <title>Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="css/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <a href="#" class="navbar-brand">PRECISE</a>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Tweet</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>  
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrp.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
            });
        </script>
    </body>
</HTML>
4

2 に答える 2

1

次のコードを CSS に追加すると、ドロップダウン メニューが機能します。

.dropdown:hover .dropdown-menu {
display: block;
color:#*any*;        
}.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}     
.dropdown:hover  .dropdown-toggle{
background-color: #*any*;
color:#*any*;
}

そして、あなたのhtmlページで次の変更を行います:-

<div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        <li class="dropdown">
                   <a href="#" class="dropdown-toggle">Dropdown 
                                           <b class="caret"></b></a>
              <ul class="dropdown-menu" role = "menu" area-labelledby = "dLabel">
                <li><a href="#">Action 1</a></li>
                <li><a href="#">Action 2</a></li>
                <li><a href="#">Action 3</a></li>
              </ul>
            </li>
          </ul>
 </div>
于 2013-12-11T06:48:27.643 に答える