Html / Css CSHTML - Аккордеон не открывается для НЕКОТОРЫХ предметов - PullRequest
Новая
       32

Html / Css CSHTML - Аккордеон не открывается для НЕКОТОРЫХ предметов

0 голосов
/ 03 октября 2018

Моя проблема в том, что я создаю раздел комментариев для страницы.Каждый комментарий может иметь несколько ответов.Я использую аккордеон начальной загрузки, чтобы достигнуть этого и динамически создавая аккордеоны через код 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 &nbsp;Cave &nbsp;&nbsp;•&nbsp;&nbsp;</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>&nbsp;&nbsp;
                    <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>&nbsp; &nbsp;
                </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 &nbsp;Cave &nbsp;&nbsp;•&nbsp;&nbsp;</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>&nbsp;&nbsp;
                    <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>&nbsp; &nbsp;
                </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 &nbsp;Cave &nbsp;&nbsp;•&nbsp;&nbsp;</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>&nbsp;&nbsp;
                    <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>&nbsp; &nbsp;
                </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 &nbsp;Cave &nbsp;&nbsp;•&nbsp;&nbsp;</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>&nbsp;&nbsp;
                    <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>&nbsp; &nbsp;
                </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 &nbsp;@comment.IbasUser.LastName &nbsp;&nbsp;&bull;&nbsp;&nbsp;</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>&nbsp;&nbsp;
                            <a id="@comment.Id" href="#" onclick="deleteComment('@comment.Id');return false;"><i class="fa fa-trash"></i> Delete</a>&nbsp; &nbsp;                                        
                        </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, но, как обычно, переполнение стека говорит, что он не отформатирован, я постараюсь добавить егопосле того, как я отправлю этот лот.Спасибо за любую помощь!

1 Ответ

0 голосов
/ 04 октября 2018

Я наконец дошел до сути своей проблемы.Разрушающиеся div использовали текущий GUI комментариев в качестве идентификатора.Я сделал это, потому что комментарии отображаются на лету, а идентификатор комментария используется для редактирования и удаления комментария в div.Я удалил все, кроме div и кнопки «развал», но это все равно не сработало.Это когда я заменил GUID для счетчика в качестве идентификатора коллапса div.Это сделало трюк, и гармошка работает как обычно.Я не знаю, почему GUID в качестве идентификатора должен сбивать с толку Аккордеон, тем более, что я использую GUID в качестве идентификаторов при рендеринге списков в html на лету.В любом случае я воспринимаю это как победу.Спасибо Питу за то, что он посмотрел.

...