2016-03-09 126 views
0

我想做一个下拉菜单,你必须点击下拉菜单之前出现。但每次我加载页面时,下拉菜单也会加载。我真的试图通过我的代码,我有一种感觉是在代码的开始。下拉菜单加载之前点击

有人可以看到这段代码有什么问题吗?

    <li class="dropdown"> 
         <a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover= 
         "dropdown" data-toggle="dropdown" href="#">Feature <i class="fa fa-angle-down"></i> 
         </a> 
         <!--container start--> 
         <div class="login-bg"> 
          <div class="container"> 
           <div class="form-wrapper"> 
           <form class="form-signin wow fadeInUp" action="index.html"> 
           <h2 class="form-signin-heading">sign in now</h2> 
           <div class="login-wrap"> 
            <input type="text" class="form-control" placeholder="User ID" autofocus> 
            <input type="password" class="form-control" placeholder="Password"> 
            <label class="checkbox"> 
             <input type="checkbox" value="remember-me"> Remember me 
             <span class="pull-right"> 
              <a data-toggle="modal" href="#myModal"> Forgot Password?</a> 

             </span> 
            </label> 
            <button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button> 
            <p>or you can sign in via social network</p> 
            <div class="login-social-link"> 
             <a href="index.html" class="facebook"> 
              <i class="fa fa-facebook"></i> 
              Facebook 
             </a> 
             <a href="index.html" class="twitter"> 
              <i class="fa fa-twitter"></i> 
              Twitter 
             </a> 
            </div> 
            <div class="registration"> 
             Don't have an account yet? 
             <a class="" href="registration.html"> 
              Create an account 
             </a> 
            </div> 

           </div> 

            <!-- Modal --> 
            <div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade"> 
             <div class="modal-dialog"> 
              <div class="modal-content"> 
               <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
                <h4 class="modal-title">Forgot Password ?</h4> 
               </div> 
               <div class="modal-body"> 
                <p>Enter your e-mail address below to reset your password.</p> 
                <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix"> 

               </div> 
               <div class="modal-footer"> 
                <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button> 
                <button class="btn btn-success" type="button">Submit</button> 
               </div> 
              </div> 
             </div> 
            </div> 
            <!-- modal --> 

           </form> 
           </div> 
          </div> 
         </div> 
         <!--container end--> 
        </li> 
        <!-- /li dropdown for login --> 
       </ul> 
       <!-- /ul for navigationbar --> 
      </div> 
     </div> 
    </header> 
    <!--header end--> 
+0

CSS代码将是不错的,否则我们无法帮助你与那些下拉菜单... – Synoon

+0

你好Synoon。我无意中发布了一些我应该做的下拉菜单,但我现在已经编辑了我的问题。 CSS只是标准的引导程序,我没有对css/js文件进行任何更改。但我认为这是下拉式切换出现问题。 –

+1

请修复你的代码,或者更好地创建一个[snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/),所以我们可以运行它并查看问题。另外,“下拉”在哪里?那是“特征”链接吗? –

回答

0

下面是bootstrap的标准代码,您可以将它用于下拉菜单。

<ul> 
    <li class="dropdown"> 
     <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      Feature <i class="fa fa-angle-down"></i> 
     </a> 
     <!-- your dropdown container start--> 
     <div class="login-bg dropdown-menu" aria-labelledby="dLabel"> 
      <div class="container"> 
       <!-- your html code can be here --> 
      </div> 
     </div> 
    </li> 
</ul> 

希望它能帮助你解决你的问题。

如果您还查询请发表您的正确的HTML或创建fiddle/bootply snippet here

+0

非常感谢你Nimmi。这解决了我的问题。我认为这是自举的开始,非常感谢。 –