Html/Css CSHTML -手风琴不打开某些项目
Html/Css CSHTML -手风琴不打开某些项目
提问于 2018-10-03 16:03:44
我的问题是，我正在为一个页面创建一个评论部分。每条评论都可以有很多回复。我使用引导手风琴来实现这一点，并通过C# MVC代码动态创建手风琴。我想不出为什么有些手风琴开得正确，而有些却开不开。每个注释由一个注释、一个编辑按钮、一个删除按钮和一个回复按钮组成。有时手风琴不会打开，但是当我进入Chrome的检查舱口时，我可以将"show“关键字放入我想要扩展的div中，它就是这样做的。以下是呈现的代码。我认为问题不在于C#代码，因为手风琴有时是打开的。有什么我不知道的等级问题吗？顺便说一下，第一个div是显示或隐藏所有评论的最外层的声名。
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion" href="#div-10" data-toggle="collapse" aria-expanded="true">
<span class="btn-accordion-arrow comments-top"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="div-10" style="">
<br>
<br>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:0px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:41</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#0d41c31f-8629-4f02-bf4c-64af8f830975" data-toggle="collapse" data-target="#0d41c31f-8629-4f02-bf4c-64af8f830975" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="0d41c31f-8629-4f02-bf4c-64af8f830975">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-0d41c31f-8629-4f02-bf4c-64af8f830975"> First Comment for Dispute 001 - PARENT</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<a href="#editModal" role="button" data-toggle="modal" data-comment="First Comment for Dispute 001 - PARENT" data-comment2="0d41c31f-8629-4f02-bf4c-64af8f830975" data-comment3="00000000-0000-0000-0000-000000000000"><i class="fa fa-pencil-square-o"></i> Edit </a>
<a id="0d41c31f-8629-4f02-bf4c-64af8f830975" href="#" onclick="deleteComment('0d41c31f-8629-4f02-bf4c-64af8f830975');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="0d41c31f-8629-4f02-bf4c-64af8f830975" id="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" name="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a href="#editModal2" role="button" data-toggle="modal" data-comment="First Comment for Dispute 001 - PARENT" data-comment2="0d41c31f-8629-4f02-bf4c-64af8f830975" data-comment3="00000000-0000-0000-0000-000000000000"><img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies"></a>
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:45</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#612de2eb-f33c-4b30-b69c-825d0c8171bd" data-toggle="collapse" data-target="#612de2eb-f33c-4b30-b69c-825d0c8171bd" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="612de2eb-f33c-4b30-b69c-825d0c8171bd">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-612de2eb-f33c-4b30-b69c-825d0c8171bd"> Second Comment for Dispute 001 - First Child</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<a href="#editModal" role="button" data-toggle="modal" data-comment="Second Comment for Dispute 001 - First Child" data-comment2="612de2eb-f33c-4b30-b69c-825d0c8171bd" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><i class="fa fa-pencil-square-o"></i> Edit </a>
<a id="612de2eb-f33c-4b30-b69c-825d0c8171bd" href="#" onclick="deleteComment('612de2eb-f33c-4b30-b69c-825d0c8171bd');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="612de2eb-f33c-4b30-b69c-825d0c8171bd" id="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" name="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a href="#editModal2" role="button" data-toggle="modal" data-comment="Second Comment for Dispute 001 - First Child" data-comment2="612de2eb-f33c-4b30-b69c-825d0c8171bd" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies"></a>
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:51</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#a869e748-f0c3-461a-89bb-07bf29620d66" data-toggle="collapse" data-target="#a869e748-f0c3-461a-89bb-07bf29620d66" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="a869e748-f0c3-461a-89bb-07bf29620d66" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-a869e748-f0c3-461a-89bb-07bf29620d66"> First REPLY for Dispute 001 - to comment 1</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<a href="#editModal" role="button" data-toggle="modal" data-comment="First REPLY for Dispute 001 - to comment 1" data-comment2="a869e748-f0c3-461a-89bb-07bf29620d66" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><i class="fa fa-pencil-square-o"></i> Edit </a>
<a id="a869e748-f0c3-461a-89bb-07bf29620d66" href="#" onclick="deleteComment('a869e748-f0c3-461a-89bb-07bf29620d66');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="a869e748-f0c3-461a-89bb-07bf29620d66" id="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" name="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a href="#editModal2" role="button" data-toggle="modal" data-comment="First REPLY for Dispute 001 - to comment 1" data-comment2="a869e748-f0c3-461a-89bb-07bf29620d66" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies"></a>
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 15:12</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#c768c95c-d926-41f7-a237-8b6803c9521d" data-toggle="collapse" data-target="#c768c95c-d926-41f7-a237-8b6803c9521d" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="c768c95c-d926-41f7-a237-8b6803c9521d" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-c768c95c-d926-41f7-a237-8b6803c9521d"> Second REPLY for Dispute 001 - to comment that was working</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<a href="#editModal" role="button" data-toggle="modal" data-comment="Second REPLY for Dispute 001 - to comment that was working" data-comment2="c768c95c-d926-41f7-a237-8b6803c9521d" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><i class="fa fa-pencil-square-o"></i> Edit </a>
<a id="c768c95c-d926-41f7-a237-8b6803c9521d" href="#" onclick="deleteComment('c768c95c-d926-41f7-a237-8b6803c9521d');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="c768c95c-d926-41f7-a237-8b6803c9521d" id="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" name="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a href="#editModal2" role="button" data-toggle="modal" data-comment="Second REPLY for Dispute 001 - to comment that was working" data-comment2="c768c95c-d926-41f7-a237-8b6803c9521d" data-comment3="0d41c31f-8629-4f02-bf4c-64af8f830975"><img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies"></a>
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
</div>
*如您所见，呈现的代码看起来正常，下面是C#视图. .cshtml:--
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion collapsed" href="#div-10" data-toggle="collapse" aria-expanded="false">
<span class="btn-accordion-arrow comments-top"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="div-10">
<br /><br />
@if (Model.DisputeComments != null)
{@*list of comment lists*@
foreach (var list in Model.DisputeComments)
{ @*comment list*@
foreach (var comment in list)
{
var indent = comment.ParentID != Guid.Empty ? "40px" : "0px";
var containerName = comment.ParentID == Guid.Empty ? comment.Id : comment.ParentID; @*use for removing on delete*@
<div class="container-fluid-@containerName" style="padding-left:@indent">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">@comment.IbasUser.FirstName @comment.IbasUser.LastName • </span><span class="blue-slate-text">@comment.EntryDate.ToString("dd-MMM-yyyy HH:mm")</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#@comment.Id" data-toggle="collapse" data-target="#@comment.Id" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="@comment.Id">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-@comment.Id"> @comment.Description</span>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<a href="#editModal" role="button" data-toggle="modal" data-comment="@comment.Description" data-comment2="@comment.Id" data-comment3="@comment.ParentID"><i class="fa fa-pencil-square-o"></i> Edit </a>
<a id="@comment.Id" href="#" onclick="deleteComment('@comment.Id');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
@{
var isChecked = "checked";
if (comment.ShareWithCustomer == false) { isChecked = "unchecked"; }
}
<input type="checkbox" value="@comment.Id" id="shareWCustomer-@comment.Id" name="shareWCustomer-@comment.Id" @isChecked> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a href="#editModal2" role="button" data-toggle="modal" data-comment="@comment.Description" data-comment2="@comment.Id" data-comment3="@comment.ParentID"><img src="~/Content/Images/icon-replies.png" class="img-responsive icon-replies" /></a>
</div>
</div>
<hr class="hr-white" />
<br />
</div>
</div>
} @* end of inner for each *@
} @*end of outer for each*@
}
</div>@*end of Comments accordian*@@*容器末端*@
**我试图添加CSS，但与往常一样，Stack溢出说它是未格式化的，我将在发布这批内容后尝试添加它。谢谢你的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-04 09:57:02
我终于把我的问题弄清楚了。折叠的div使用当前注释GUId作为标识符。我这样做是因为注释是动态呈现的，注释id用于编辑和删除div中的注释。我把所有的东西都去掉了，除了折叠的div和按钮，但是它仍然没有工作。这时，我用GUID代替计数器作为折叠div的标识符。这做了诡计，手风琴工作正常。我不知道为什么GUID作为ID会使手风琴变得不可靠，特别是当我经常将GUID作为ID呈现给html时。无论如何，我都认为这是一场胜利。感谢皮特看了看。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52631322
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号