Bootstrap меню пользовательских выпадающий

мне удалось slideDown в раскрывающемся меню со следующим кодом:Bootstrap меню пользовательских выпадающий

$('.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 Done. Обновлен код в вопросе. – 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 (крест -browser-библиотека анимации 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

Bootstrap меню пользовательских выпадающий

ответ

Смежные вопросы