2016-03-09 127 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。這解決了我的問題。我認爲這是自舉的開始,非常感謝。 –