выпадающее меню fullPage.js
В принципе, браузер зависит от того, какое значение по умолчанию для свойства display для каждого элемента. Даже черновики HTML5 не предписывают, какие значения должны использоваться, хотя он представляет «ожидаемый рендеринг» элементов с точки зрения CSS.
Согласно таблице стилей по умолчанию для HTML в CSS 2.1, элементы, которые по умолчанию имеют display: inline-block, - button, input, select и textarea. Браузеры используют такие настройки, за исключением того, что в Firefox это относится только к button и select.
В разделе Rendering HTML5 CR, meter и progress дополнительно описывается как наличие встроенного блока как «ожидаемого рендеринга», и браузеры, которые реализовали эти элементы, по-видимому, ведут себя таким образом. Элемент keygen также описывается как встроенный блок, но Firefox этого не делает (он реализовал keygen внутренне как select в DOM); IE не поддерживает keygen вообще; Chrome реализует его, как было предложено.
Поскольку все эти элементы имеют довольно специализированные значения, функциональность и рендеринг idiosyncracies, ни один из них не является адекватным для общего использования в качестве элемента, который является встроенным блоком по умолчанию и может иметь различные значения. То, что вы можете использовать для такого элемента, обычно span или div, в зависимости от того, предпочитаете ли вы встроенный или блок как рендеринг по умолчанию.
2 ответа
Я создал пример скрипта, используя bootstrap js и bootsrap css, с учетом вашего кода, и я также добавил fullpage js, но раскрывающийся список работает нормально.
Пожалуйста, отметьте здесь . работает нормально. Файл JS и Css.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.com/libraries/fullPage.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul id="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</li>
</ul>
После долгих поисков и поисков, я нашел способ сделать то, что хочу.
Вы должны использовать Bootstrap.css, Bootstrap.js, jQuery.js и Popper.js.
Также вы должны установить crossorigin="anonymous"
<script type="text/javascript" src="lib/js/jquery-3.3.1.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/popper-1.14.7.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/js/bootstrap-4.3.1.js" crossorigin="anonymous"></script>
Также об использовании скриптов Java вы можете использовать его следующим образом: (как указано здесь - сайт начальной загрузки )
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Вот меню:
<ul id="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</li>
</ul>
Я надеюсь, что это поможет некоторым людям, потому что я нашел пару вопросов, похожих на мой.