ブートストラップドロップダウンメニューがありません

Question

ブートストラップドロップダウンメニューまたはドロップダウンメニューを追加するのに多くの時間を費やしていますが、たくさんのコードを書き込もうとしていません。これは私の最後のバージョンです。

<div class="card"> 
@if (Model.Photo == null) 
{ 
    <img src='~/Content/default-user-image.png' style="width: 100%;"> 
} 
else 
{ 
    <img src='@Url.Action("Show", "Members", new { id = Model.UniqueId })' alt="@Model.Name" style="width: 100%;"> 
} 
<div class="cardcontainer"> 
    <h1>@Model.Name</h1> 
    <p class="cardtitle">@Model.Email</p> 
    <dl> 
     <dt> 
      @Html.DisplayName("Addresses") 
     </dt> 

     <dd> 
      @foreach (var item in Model.Address.Where(m => m.MemberId == Model.UniqueId)) 
     { 
       <details> 
        <summary>@(item.Country + '-' + item.Governorate + '-' + item.District + '-' + item.Street + '-' + item.BuildingNumber)</summary> 
       </details> 
      } 

     </dd> 

     <dt> 
      @Html.DisplayName("Personal ID") 
     </dt> 

     <dd> 
      @foreach (var item in Model.PersonalID.Where(m => m.MemberId == Model.UniqueId)) 
     { 
       <details> 
        <summary>@(item.IDType.Name + '-' + item.IDNumber)</summary> 
       </details> 
      } 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.Phone) 
     </dt> 

     <dd> 
      @foreach (var item in Model.Phone.Where(m => m.MemberId == Model.UniqueId)) 
     { 
       <details> 
        <summary>@(item.PhoneType.Name + '-' + item.Code + '-' + item.Number)</summary> 
       </details> 
      } 
     </dd> 

     <dt> 
      @Html.DisplayNameFor(model => model.Profile) 
     </dt> 

     <dd> 
      @foreach (var item in Model.Profile.Where(m => m.MemberId == Model.UniqueId)) 
     { 
       <details> 
        <summary>@(item.Category.Name + '-' + item.SubCategory.Name + '-' + item.UniversityId + '-' + item.LibraryAccess)</summary> 
       </details> 
      } 

     </dd> 

     <dt></dt> 
     <dd> 
      <div class="dropdown"> 
       <i class="fa fa-plus fa-lg" style="color:#428bca;cursor:pointer;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"></i> 
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
        <li><a href="@Url.Action("Create", "Addresses",new {id=Model.UniqueId })">Address</a></li> 
        <li><a href="@Url.Action("Create", "PersonalIDs",new {id=Model.UniqueId })">Personal ID</a></li> 
        <li><a href="@Url.Action("Create", "Phones",new {id=Model.UniqueId })">Phone</a></li> 
        <li><a href="@Url.Action("Create", "Profiles",new { id=Model.UniqueId})">Profile</a></li> 
       </ul> 
      </div> 
     </dd> 
    </dl> 
    @*<p> 
     <div class="dropdown"> 
      <i class="fa fa-plus fa-lg" style="color:#428bca;cursor:pointer;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"></i> 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
       <li><a href="@Url.Action("Create", "Addresses",new {id=Model.UniqueId })">Address</a></li> 
       <li><a href="@Url.Action("Create", "PersonalIDs",new {id=Model.UniqueId })">Personal ID</a></li> 
       <li><a href="@Url.Action("Create", "Phones",new {id=Model.UniqueId })">Phone</a></li> 
       <li><a href="@Url.Action("Create", "Profiles",new { id=Model.UniqueId})">Profile</a></li> 
      </ul> 
     </div> 
    </p>*@ 
</div> 

そして、これはCSSのコードです：

.card { 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    max-width: 300px; 
    margin: auto; 
    text-align: center; 
    font-family: arial; 
} 

.cardcontainer { 
    padding: 0 16px; 
} 

.container::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

.cardtitle { 
    color: grey; 
    font-size: 18px; 
} 

.cardbutton { 
    border: none; 
    outline: 0; 
    display: inline-block; 
    padding: 8px; 
    color: white; 
    background-color: #000; 
    text-align: center; 
    cursor: pointer; 
    width: 100%; 
    font-size: 18px; 
} 

.carda { 
    text-decoration: none; 
    font-size: 22px; 
    color: black; 
} 

Answer 1

あなたはBootstrap Javascriptを必要とjQueryは、その前に含まれている必要があります。

また、<i>タグにdropdown-toggleクラスがありません。