Question

我从https://getbootstrap.com/docs/4.3/components/dropdowns/到
有香草Bootstrap 4.1.3下拉列表
- 我有来自CDN的bootstrap css，js bundle和jquery
- 下拉菜单正常
- 节标记中指向id ='＃xxx'的链接不起作用
- 这个问题看起来很相似，而且似乎没有得到有效的答案-Bootstrap navbar dropdown link does not work when bootstrap.min.js is in the code

27:9 Property 'sagaTask' does not exist on type 'Store<{ error: any; count: number; lastUpdate: number; light: boolean; placeholderData: any; } | { lastUpdate: any; light: boolean; count: number; error: boolean; placeholderData: any; }, any>'.
    25 |   )
    26 | 
  > 27 |   store.sagaTask = sagaMiddleware.run(rootSaga)
       |         ^
    28 | 
    29 |   return store
    30 | }

期望查看所选页面；没有错误消息

Answer 1

似乎工作正常……例如：

article {margin-top: 100vh; width: 90%; border: 5px solid black;} /* just for the demo */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="dropdown">
  <button class="navbar-toggler" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="navbar-toggler-icon">hamburger</span> <!-- Put in hamburger -->
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#about">About Me</a>
    <a class="dropdown-item" href="#heritage">My Heritage</a>
    <a class="dropdown-item" href="#contact">Get In Touch</a>
  </div>
</div>

<article id="about">ABOUT</article>
<article id="heritage">hERITAGE</article>
<article id="contact">CONTACT</article>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

编辑-使用引导程序4.3.1具有相同的结果（即-按预期工作）：

article {margin-top: 100vh; width: 90%; border: 5px solid black;} /* just for the demo */

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="dropdown">
  <button class="navbar-toggler" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="navbar-toggler-icon">hamburger</span> <!-- Put in hamburger -->
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#about">About Me</a>
    <a class="dropdown-item" href="#heritage">My Heritage</a>
    <a class="dropdown-item" href="#contact">Get In Touch</a>
  </div>
</div>

<article id="about">ABOUT</article>
<article id="heritage">hERITAGE</article>
<article id="contact">CONTACT</article>

<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>

引导程序4.3.1下拉列表中的链接不起作用

1 个答案: