Загрузочный верхний уровень item clickable и open dropdown on hover

Question

Я использую меню yamm3, и мне бы хотелось, чтобы элементы меню верхнего уровня были доступны для кликов, а затем отобразили выпадающий список при наведении указателя мыши.

Я использую следующий код, чтобы сделать выпадающее меню при наведении курсора мыши, а не на клик:

$('.navbar .dropdown').hover(function() { 
 
    $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 
 
}, function() { 
 
    $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp() 
 
});

Но я до сих пор не удается получить к началу пунктов меню, чтобы быть интерактивными.

Вот HTML-

<div id="navbar-collapse-1" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About Us<b class="caret"></b></a> 
 
       <ul role="menu" class="dropdown-menu"> 
 
       <li><a tabindex="-1" href="#"> Meet Our Team</a></li> 
 
       <li><a tabindex="-1" href="#"> Why GoPlay </a></li> 
 
       <li><a tabindex="-1" href="#"> Affiliations </a></li> 
 
       <li class="divider"></li> 
 
       <li><a tabindex="-1" href="#">Contact US </a></li> 
 
       </ul> 
 
      </li>   
 
      <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Browse Tours<b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
       <li> 
 
        <div class="yamm-content"> 
 
        <div class="row"> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Soccer" src="images/placeholder_browsetours_dropdown.png"></a><br/>Soccer</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Rugby" src="images/placeholder_browsetours_dropdown.png"></a><br/>Rugby</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Volleyball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Volleyball</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Field Hockey" src="images/placeholder_browsetours_dropdown.png"></a><br/>Field Hockey</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Basketball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Basketball</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Baseball and Softball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Baseball/Sofatball</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Other Sports" src="images/placeholder_browsetours_dropdown.png"></a><br/>Other Sports</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Tournaments" src="images/placeholder_browsetours_dropdown.png"></a><br/>Tournaments</div> 
 
         <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Fan Tours" src="images/placeholder_browsetours_dropdown.png"></a><br/>Fan Tours</div> 
 
        </div> 
 
        </div> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Coaches<b class="caret"></b></a> 
 
       <ul role="menu" class="dropdown-menu"> 
 
       <li><a tabindex="-1" href="#"> Sports Philosophy</a></li> 
 
       <li><a tabindex="-1" href="#">Five Steps Planning Your Tour </a></li> 
 
       <li><a tabindex="-1" href="#"> What to Expect </a></li> 
 
       <li><a tabindex="-1" href="#"> Benefits </a></li> 
 
       <li><a tabindex="-1" href="#"> Service Guarantee </a></li> 
 
       <li><a tabindex="-1" href="#"> What to Expect Overseas</a></li> 
 
       <li><a tabindex="-1" href="#"> Download Coaches Handbook</a></li> 
 
       </ul> 
 
      </li> 
 
      <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Players<b class="caret"></b></a> 
 
       <ul role="menu" class="dropdown-menu"> 
 
       <li><a tabindex="-1" href="#"> Travel With GoPlay</a></li> 
 
       <li><a tabindex="-1" href="#"> What to Pack </a></li> 
 
       <li><a tabindex="-1" href="#"> Making Payments </a></li> 
 
       <li><a tabindex="-1" href="#"> Automatic Payments </a></li> 
 
       <li><a tabindex="-1" href="#"> Protection Plans </a></li> 
 
       <li><a tabindex="-1" href="#"> Keeping in Touch </a></li> 
 
       <li><a tabindex="-1" href="#"> GoPlay Travel App </a></li> 
 
       <li><a tabindex="-1" href="#"> FAQ </a></li>     
 
       </ul> 
 
      </li> 
 
      <li class="no-dropdown"><a href="#"> Flights </a></li> 
 
      <li class="no-dropdown"><a href="#"> Blog </a></li>      
 
      </ul> 
 
     </div>

Answer 1

вы должны удалить данные рычажками = "выпадающий" на ваших верхнего уровня элементов. иначе это не сработает. и я бы предложил использовать CSS-только для выпадающего списка.

поэтому возможно дубликат этого: How to make twitter bootstrap menu dropdown on hover rather than click

Answer 2

Поскольку у меня была куча другого кода, который должен нормально работать в не ниспадающего-hoverable компонента, я решил эту проблему, используя нативные события в бутстрэпами выпадающего списка. JS. Решение, найденное в другой теме, которая использовала css, не Работа в моем случае.

Ниже мое решение, которое немного более подробно, так как я добавил таймер для видимости и скрытых состояний. Если это удалено, решение, вероятно, близко к 8 строкам кода.

---

export default class DropdownHover extends Dropdown { 

constructor(...args){ 
    super(...args) 

    this.timerIn = null; 
    this.timerOut = null; 

    this.inTime = 250 
    this.outTime = 100 

} 

config(isInitialized){ 
    super.config(isInitialized) 
    if(isInitialized) return 

    var button = this.$() 
    button.hover(this.mouseIn.bind(this), this.mouseOut.bind(this)) 

    this.dropdown = this.$() 

} 

mouseIn(){ 
    if(this.timerIn) { 
     clearTimeout(this.timerIn); 
     this.timerIn = null 

     // If there are any gaps between the dropdown 
     // and the menu this will fix it 
     clearTimeout(this.timerOut); 
     this.timerOut = null 
    } 

    this.timerIn = setTimeout(() => { 
     this.dropdown 
      .addClass('open') 
      .trigger($.Event('shown.bs.dropdown')) // If you look in dropdown.js this is the event used to trigger other actions. 
    }, this.inTime) 
} 

mouseOut(){ 
    if(this.timerOut) { 
     clearTimeout(this.timerOut); 
     this.timerOut = null 
    } 
    this.timerOut = setTimeout(() => { 
     this.dropdown 
      .removeClass('open') 
      .trigger($.Event('hidden.bs.dropdown')) 
    }, this.outTime) 
} 
}