Javascript “引导登录下拉列表”;点击";不起作用

Javascript “引导登录下拉列表”;点击";不起作用,javascript,jquery,css,forms,drop-down-menu,Javascript,Jquery,Css,Forms,Drop Down Menu,我已经研究过这个问题,但我仍然无法让它工作,当我单击表单时,它会因为boostrap-dropdown.js而关闭。然而,我遵循这个指南,使用bootstrap:,在我的导航栏上创建了一个登录dropbdown,他们已经包含了JS来阻止表单关闭,但是它对我不起作用 这是我的密码: <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><

我已经研究过这个问题,但我仍然无法让它工作,当我单击表单时,它会因为boostrap-dropdown.js而关闭。然而,我遵循这个指南,使用bootstrap:,在我的导航栏上创建了一个登录dropbdown,他们已经包含了JS来阻止表单关闭,但是它对我不起作用

这是我的密码:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Your site name for the upper left corner of the site -->
<a class="brand"><img name="" src="bglogo.png"  alt=""></a>

<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->

<!-- The drop down menu -->
<ul class="nav pull-right">
<li><a href="/users/sign_up">Sign Up</a></li>
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="Checklogin.php" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>

<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size:    13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>


  • 记得我吗
  • 以及在close body标记之前插入的Javascript:

    <!-- Placed at the end of the document so the pages load faster -->
    
    <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
    
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
    <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
    <script>
    $(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();
    
    // Fix input element click problem
    $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
    });
    });</script>
    
    
    $(函数(){
    //设置下拉菜单
    $('.dropdown toggle').dropdown();
    //修复输入元素单击问题
    $('.下拉输入,.下拉标签')。单击(函数(e){
    e、 停止传播();
    });
    });
    
    谢谢


    编辑:我越想它,就越意识到它必须是一个脚本问题,因为表单和导航栏都很好,但当我“单击”下拉列表时,它就会关闭

    您在js中引用了错误的容器,
    .dropdown
    ,它应该是
    。dropdown menu
    ;试试这个:

    JS

    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
    

    快速提示:通过使用脚本包,而不是逐个加载脚本,可以最大限度地减少页面中的js调用数量

    您在js中引用了错误的容器,
    .dropdown
    ,它应该是
    。dropdown menu
    ;试试这个:

    JS

    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
    
    快速提示:通过使用脚本包,而不是逐个加载脚本,可以最大限度地减少页面中的js调用数量