Блог

Главная - Вопросы по программированию - Выпадающее меню jQuery в сочетании с Bootstrap 4, дочерние элементы не расширяются

Выпадающее меню jQuery в сочетании с Bootstrap 4, дочерние элементы не расширяются

#jquery #css #twitter-bootstrap

#jquery #css #twitter-bootstrap

Вопрос:

Взгляните на этот JSfiddle.

Корневые меню расширяются при наведении курсора мыши, как и ожидалось. Но дочерние элементы этого не делают.

Если вы удалите <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/> из <head> -section , это действительно сработает.

Что вызывает этот конфликт и как его можно разрешить?

Ответ №1:

Замените ваши классы jQuery такими же, как показано ниже:

 $(function(){
        $('ul#menu li').hover(function(){
            //$('#drop' , this).css('display','block');
             $(this).children('ul').show();
        }, function(){
             $(this).children('ul').hide();
        });
    });

Ответ №2:

Здесь overflow стиль создает проблему, поведение начальной загрузки по умолчанию — это когда вы нажимаете или наводите курсор мыши, которые применяются overflow: hidden в элементе, но вы хотите добавить дочернее меню, поэтому вам нужно добавить CSS

 ul#menu > li ul.drop {
    overflow: visible !important;
}

!important необходимо, потому что overflow это условие добавляется через inline

ОБНОВЛЕННАЯ СКРИПКА: http://jsfiddle.net/7f38r41z /

 $(function(){
    $('ul#menu li').hover(function(){
        //$('#drop' , this).css('display','block');
         $(this).children('ul').slideDown(0);
    }, function(){
         $(this).children('ul').delay(0).slideUp(0);
    });
}); 
 ul#menu {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
}

ul#menu > li {
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

ul#menu a {
    text-decoration: none;
    color: #222;
    background: #ccc;
    display: block;
    padding: 10px;
}

ul#menu a:hover {
    text-decoration: none;
    color: #00f;
    background: #ff8;
    display: block;
    padding: 10px;
}

ul#menu > li ul.drop {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    overflow: visible !important;
}

ul#menu > li ul.drop ul {
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    display: none;
    left: 150px;
    top: 0;
}

ul#menu > li ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
} 
 <html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
  </head>
  <body>
    <div class="row">
      <div class="col-lg-12">
        <ul id="menu">
          <li><a href="#">Home</a>
            <ul class="drop">
              <li><a href="#">About us</a></li>
              <li>
                <a href="#">About us ></a>
                <ul>
                  <li><a href="#">Sub Item 1</a></li>
                  <li>
                    <a href="#">Sub Item 2 ></a>
                    <ul>
                      <li><a href="#">Sub item 3</a></li>
                      <li><a href="#">Sub item 4</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">About</a>
            <ul class="drop">
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <h3>
          Page title
        </h3>
        <p>
          Page contents
        </p>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</body>
</html>

Метки: ,