如何使Bootstrap下拉菜单在按钮上滑下来点击

即时通讯使用Bootstrap，我试图在单击按钮时在下拉菜单中声明一个事件。由于某种奇怪的原因，jquery事件不会触发。下拉菜单应该放在搜索查询元素的正下方。我的JS小提琴是http://jsfiddle.net/sean3200/fNrZ3/ ...任何帮助将不胜感激..感谢！下面是一些代码如何使Bootstrap下拉菜单在按钮上滑下来点击

 <div class="container"> 
    <div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <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> 
     <a class="brand" href="#">Forbes Clientel</a> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
      <li> 
       <a href="#" class="active">Home</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
      </ul> 
     </div> 
     <form class="navbar-search"> 
      <input class="search-query" placeholder="Search..." type="text"> 
      <div id="drop" class="dropdown"> 
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
       <li> 
       <a tabindex="-1" href="#">Action</a> 
       </li> 
       <li> 
       <a tabindex="-1" href="#">Another action</a> 
       </li> 
       <li> 
       <a tabindex="-1" href="#">Something else here</a> 
       </li> 
       <li class="divider"></li> 
       <li> 
       <a tabindex="-1" href="#">Separated link</a> 
       </li> 
      </ul> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="hero-unit"> 
     <h1>Forbes Clientel</h1> 
     <p>FC is a directory of the top forbes earning entrepreneurs</p> 
     <input id="myBtn" 
     class="btn btn-primary btn-large" value="Search" type="button"> 
    </div> 
    </div> 
</div> 


//script 
      $(document).ready(function(){ 
       $("#myBtn").click(function(){ 
        $("#drop").slidedown(); 
       }) 

      })

来源

2013-06-02 Titus Shoats

不知道到底要怎么办呢？ [是这个吗？]（http://jsfiddle.net/Spokey/fNrZ3/3/） – Spokey

是的，谢谢一堆！..我忘记了有这个其他幻灯片方法.. :) –

正如Eliran埃夫隆说，改变JS第3行：

$("#drop").slideDown();

更改HTML线25-26到：

<div class="dropdown"> 
    <ul id="drop" class="dropdown-menu" role="menu" aria-labelledby="dLabel">

你提到了你的JS错误的元素，这就是一切。

这里就是你们的榜样修改和工作：http://jsfiddle.net/fNrZ3/4/

来源

2013-06-02 20:26:37 thomallen

首先：功能被命名为.slideDown() 资本ð有可以让休变化......（工作或没有，不要忘了这是你调用一个函数）。

从我所看到的在镀铬的JS控制台上，我得到的错误：Uncaught TypeError: Object [object Object] has no method 'slidedown'所以它肯定是有事情做的名称，以便将其更改为一个与那里的资本D.

我猜它主要是一些设置的设计... 你可以尝试在演示看这里和使用它的一些： .slideDown() jQuery API

来源

2013-06-02 19:29:54

$(document).ready(function($){ 
    $('.dropdown-menu').click(function(e) { 
     e.stopPropagation(); 
    }); 
    $(".btn-group").click(function(){ 
     if($(this).hasClass('open')){ 
      $(".dropdown-menu").slideUp(); 
     }else{ 
      $(".dropdown-menu").slideDown(); 
     } 
    });  
}); 

$(document).on('click.dropdown.data-api', function(){ 
     $(".dropdown-menu").slideUp(); 
});

来源

2013-07-21 12:07:13 Kabra4

请加向你的代码描述你做了什么。 –

如何使Bootstrap下拉菜单在按钮上滑下来点击

回答

相关问题