1. ホーム
  2. html

[解決済み] Bootstrapのドロップダウンが機能しない

2022-03-01 05:21:40

質問

ブートストラップのドロップダウンを動作させることができません。 以下は、私のナビ用htmlです。

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

そして、以下がそのスクリプトです。

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

何が間違っているのでしょうか?回答ありがとうございました。

解決方法を教えてください。

動作デモです。 http://codebins.com/bin/4ldqp73

これを試してみてください

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>