引導定製的下拉菜單

我設法了slideDown用下面的代碼的下拉菜單：引導定製的下拉菜單

$('.dropdown-toggle').click(function() { 
    $(this).next('.dropdown-menu').slideToggle(500); 
});

但點擊下拉撥動類只有當這種明顯的作品。如何整合Bootstrap的功能，當點擊下拉菜單或點擊外部時，下拉菜單消失。

HTML：

 <div class="dropdown"> 
     <div class="dropdown-toggle" data-toggle="dropdown">Click Me</div> 

      <ul class="dropdown-menu optfulwidth ulreligion"> 
       <li>one</li> 
       <li>two</li> 
       <li>three</li> 
       <li>four</li> 
      </ul> 
     </div>

來源

2016-09-19 Somename

我們需要更多的信息...你能擴大你的例子，包括相關的代碼？ – mhatch

@mhatch完成。更新了問題中的代碼。 – Somename

你不需要額外的CSS有下拉菜單打開和關閉。

<div class="dropdown clearfix"> 
<div class="dropdown-toggle" data-toggle="dropdown"><a>Click Me</a></div> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" > 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">three</a></li> 

    </ul> 
</div>

這裏是一個bootply

，如果你希望它滑下添加以下

// ADD SLIDEDOWN ANIMATION TO DROPDOWN // 
$('.dropdown').on('show.bs.dropdown', function(e){ 
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
}); 

// ADD SLIDEUP ANIMATION TO DROPDOWN // 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
});

來源

2016-09-19 20:38:09

現有的只顯示和隱藏。我想爲菜單添加slideUp和slideDown。 – Somename

再次查看@Somename –

非常感謝 – Somename

如果你想要更多的東西闡述，你可以放在一起真棒Animate.css，（跨CSS動畫瀏覽器庫），一些jquery，當然還有Twitter Boostrap。

在您的標題：

<head> 
    ... 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> 
</head>

在你的身體要在其中創建下拉：

<div class="dropdown" data-animation="slideInDown,slideOutUp,600"> 
      <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </div>

注意在標記數據的動畫屬性，您必須提供3個參數，動畫中，動畫和持續時間。

如果你喜歡other animations，你可以玩。

在您的頁腳（或你使你的腳本）：

<script src="js/jquery-2.1.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script type="text/javascript"> 
    $(function() { 

     var $in, $out, $duration; 
     $('.dropdown') 
      .on('shown.bs.dropdown', 
       function (e) { 
        if ($(this).attr('data-animation')) { 
         let $animations = []; 
         const $animation = $(this).data('animation'); 
         $animations = $animation.split(','); 
         $in = 'animated ' + $animations[0]; 
         $out = 'animated ' + $animations[1]; 
         $duration = ''; 
         if (!$animations[2]) { 
          $duration = 500; 
         } else { 
          $duration = $animations[2]; 
         } 
         $(this).find('.dropdown-menu').removeClass($out); 
         $(this).find('.dropdown-menu').addClass($in); 
        } 
       }); 

     $('.dropdown') 
      .on('hide.bs.dropdown', 
       function (e) { 
        if ($(this).attr('data-animation')) { 
         e.preventDefault(); 
         const $this = $(this); 
         const $targetControl = $this.find('.dropdown-menu'); 

         $targetControl.addClass($out); 
         setTimeout(function() { 
          $this.removeClass('open'); 
         }, 
         $duration); 
        } 
       }); 
    }) 
</script>

希望這有助於！

需要完整的示例？

 $(function() { 
 

 
      var $in, $out, $duration; 
 
      $('.dropdown') 
 
       .on('shown.bs.dropdown', 
 
        function (e) { 
 
         if ($(this).attr('data-animation')) { 
 
          let $animations = []; 
 
          const $animation = $(this).data('animation'); 
 
          $animations = $animation.split(','); 
 
          $in = 'animated ' + $animations[0]; 
 
          $out = 'animated ' + $animations[1]; 
 
          $duration = ''; 
 
          if (!$animations[2]) { 
 
           $duration = 500; 
 
          } else { 
 
           $duration = $animations[2]; 
 
          } 
 
          $(this).find('.dropdown-menu').removeClass($out); 
 
          $(this).find('.dropdown-menu').addClass($in); 
 
         } 
 
        }); 
 

 
      $('.dropdown') 
 
       .on('hide.bs.dropdown', 
 
        function (e) { 
 
         if ($(this).attr('data-animation')) { 
 
          e.preventDefault(); 
 
          const $this = $(this); 
 
          const $targetControl = $this.find('.dropdown-menu'); 
 

 
          $targetControl.addClass($out); 
 
          setTimeout(function() { 
 
           $this.removeClass('open'); 
 
          }, 
 
          $duration); 
 
         } 
 
        }); 
 
     })

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> 
 

 
<div class="dropdown" data-animation="slideInDown,slideOutUp,600"> 
 
      <button type="button" class="btn btn-primary" data-toggle="dropdown">Click to toggle animated dropdown <i class="caret"></i></button> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li class="divider"></li> 
 
       <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2016-09-19 21:54:02

引導定製的下拉菜單

回答

相關問題