Bootstrap Переключение с открытым меню при наведении курсора мыши и близко по щелчку

Question

У меня есть тумблер кнопка с ниспадающего меню, где мое требование является:

• Dropdown должен открыть при наведении курсора мыши, но не должны закрывать еще раз, когда отпуск мыши оттуда (на mouseleve)

• Dropdown следует закрыть по нажатию на кнопку закрытия, которая дисплея после открытия выпадающего меню

Вот мой HTML-код:

<div class="row pull-right hamburger-position"> 
     <div class="col-md-12"> 
      <div class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown"> 
        <i class="glyphicon glyphicon-menu-hamburger"></i> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">HTML</a></li> 
        <li><a href="#">CSS</a></li> 
        <li><a href="#">JavaScript</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

Итак, как я могу поддерживать эти оба сценария?

Answer 1

здесь я добавил некоторые JQuery, и теперь он работает!

$(document).ready(function() { 
     $('.dropdown-toggle').click(function() { 
      if ($('.dropdown-menu').css('display') == 'block') { 
       $('.dropdown-menu').css('display', 'none'); 
      } else { 
       $('.dropdown-menu').css('display', 'block'); 
      } 
     }); 

     $('.dropdown-toggle').mouseover(function() { 
      $('.dropdown-menu').css('display', 'block'); 
     }) 
    }); 

Но все-таки я хочу сделать это только с AngularJS ....!

И еще одно требование: * На открытии кнопки ниспадающего переключения следует заменить кнопку закрытия (х)

Answer 2

Пожалуйста, введите код с вашей стороны, который вы пытаетесь сделать что-то нужным. Потому что,

[ученья] :)

$('.hamburger-position .my-dropdown').hover(function(){ 
 
    $(this).addClass('open').css({ 
 
    'border':'1px solid red' 
 
    }); 
 
});

.my-dropdown{ 
 
    width:auto; 
 
    float:left; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
<div class="row hamburger-position"> 
 
    <div class="col-md-12"> 
 
    <div class="dropdown my-dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown"> 
 
     <i class="glyphicon glyphicon-menu-hamburger"></i> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">HTML</a> 
 
     </li> 
 
     <li><a href="#">CSS</a> 
 
     </li> 
 
     <li><a href="#">JavaScript</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
</div>