Как я могу загрузить панель по идентификатору? - PullRequest
Новая
       4

Как я могу загрузить панель по идентификатору?

0 голосов
/ 30 апреля 2020

У меня есть две панели rpspanel и sppanel Панель, как я могу показать или скрыть их на основе выбранного идентификатора списка?

У меня есть этот список: 

 <ul id="list" style="line-height: 0.01;">
      @foreach (var item in compInfo)
             {
              <li data-expanded="false" class="panel-handler" data-id="@item.ID">@item.CompanyName
                 @foreach (var scontractor in item.SubContractor)
                    {
                      <ul>
                         <li class="panel-handler" data-expanded="true" data-id="@subcontractor.ID">@scontractor.Name</li>
                       </ul>
                     }                                    
               </li>
            }
  </ul>

Вкл. <li> щелчок по списку, который я хочу скрыть или показать, если вложенные щелкнули, я хочу щелкнуть, показать sppanel, если щелкнул родительский список, я хочу показать rpspanel

Я могу скрыть и показать rpspanel когда родительский элемент <li> нажал, я использовал это JQuery, но я не могу обработать вложенный список 
<script>
    $(document).ready(function () {
        $(".panel-handler").click(function () {
            showInfo($(this).data("id"));
        });

        function showInfo(id) {
            $(".rpspanel").slideUp();
            $("#" + id).slideDown();
        }

        // For first time load
        showInfo($(".panel-handler").eq(0).data("id"))
</script>

Моя первая панель: 

  @foreach (var item in compInfo)
            {
          <div class="panel rpspanel panel-default" id="@item.ID">
                        <div class="panel-heading">
                           <h5>Contact Information<h5>
                        </div>
                        <div class="panel-body">                      
                            <div class="card card-default">
                                <div class="card-heading">
                                    <h4>Contact Details</h4>
                                </div>
                                <div class="card-body">
                                    <p>
                                        @item.Name<br>
                                        @item.Phone<br>
                                        @item.Email<br>                                          
                                    </p>
                                </div>
                            </div>
              </div>
    </div>
    }

Моя вторая Панель 

@foreach (var scontractor in item.Contractors)
{
    <div class="panel sppanel panel-default" id="@scontractor.ID">
        <div class="panel-heading">
           <h5>Contact Information<h5>
        </div>
        <div class="panel-body">                      
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contact Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        @scontractor.Name<br>
                        @scontractor.Phone<br>
                        @scontractor.Email<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

1 Ответ

1 голос
/ 30 апреля 2020 

$(document).ready(function () {
    $(".panel-handler").click(function (event) {
        $(".rpspanel,.sppanel").slideUp();
        var $this = $(this);
        // Show li clicked
        showInfo($this.data("id"));

        if ($this.hasClass('company')) {
           // If company then show all contractors under that company
           $this.find('.contractor').each( function(index, el) {
              showInfo($(el).data("id"));
           });
        } else if ($this.hasClass('contractor')) {
           // If contractor then show company for that contractor
           showInfo($this.closest('.company').data("id"));
        }

        return false;
    });

    function showInfo(id) {
        $("#" + id).slideDown();
    }

    // For first time load
    $(".panel-handler:first").click();
});
.panel-handler {
  cursor: pointer;
}
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="./placeholder.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .panel-handler {
      cursor: pointer;
    }
  </style>
</head>

<body>

<ul id="list"> <!-- style="line-height: 0.01;"> -->
  <li data-expanded="false" class="panel-handler company" data-id="company1">Company 1
      <ul><li class="panel-handler contractor" data-expanded="true" data-id="subcontractor1a">Contractor 1A</li></ul>
      <ul><li class="panel-handler contractor" data-expanded="true" data-id="subcontractor1b">Contractor 1B</li></ul>
  </li>

  <li data-expanded="false" class="panel-handler company" data-id="company2">Company 2
      <ul><li class="panel-handler contractor" data-expanded="true" data-id="subcontractor2a">Contractor 2A</li></ul>
      <ul><li class="panel-handler contractor" data-expanded="true" data-id="subcontractor2b">Contractor 2B</li></ul>
  </li>
</ul>


<div class="panel rpspanel panel-default" id="company1">
   <div class="panel-body">
       <div class="card card-default">
           <div class="card-heading">
               <h4>Company Details</h4>
           </div>
           <div class="card-body">
               <p>
                   Company 1<br>
                   555-555-1111<br>
                   company1@fake.com<br>
               </p>
           </div>
       </div>
     </div>
</div>


    <div class="panel sppanel panel-default" id="subcontractor1a">
        <div class="panel-body">
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contractor Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        Contractor 1A<br>
                        Contractor 555-1111A<br>
                        contractor1a@fake.com<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="panel sppanel panel-default" id="subcontractor1b">
        <div class="panel-body">
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contractor Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        Contractor 1B<br>
                        Contractor 555-1111B<br>
                        contractor1b@fake.com<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

<div class="panel rpspanel panel-default" id="company2">
   <div class="panel-body">
       <div class="card card-default">
           <div class="card-heading">
               <h4>Company Details</h4>
           </div>
           <div class="card-body">
               <p>
                   Company 2<br>
                   555-555-2222<br>
                   company2@fake.com<br>
               </p>
           </div>
       </div>
     </div>
</div>

    <div class="panel sppanel panel-default" id="subcontractor2a">
        <div class="panel-body">
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contractor Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        Contractor 2A<br>
                        Contractor 555-2222A<br>
                        contractor2a@fake.com<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="panel sppanel panel-default" id="subcontractor2b">
        <div class="panel-body">
            <div class="card card-default">
                <div class="card-heading">
                    <h4>Contractor Details</h4>
                </div>
                <div class="card-body">
                    <p>
                        Contractor 2B<br>
                        Contractor 555-2222B<br>
                        contractor2b@fake.com<br>
                    </p>
                </div>
            </div>
        </div>
    </div>


</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./loadpanel.js"></script>

jQuery накапливает события для родительских элементов, что приводит к нажатию на вложенный li для вызова $ (". Panel-handler ") .click () для вложенного li, а затем всплыть, чтобы вызвать его для родительского li. Это всплывающее окно заставляет его выглядеть так, как будто щелчок на вложенном li не происходит.

Чтобы предотвратить всплывающее уведомление, верните false из обработчика щелчка. Читайте о всплывающих событиях и возвращении ложных значений по сравнению с вызовом event.preventDefault (), event.stopPropagation () и event.stopImmediatePropagation ().

Сначала я бы отличил li Компании от Li Подрядчика, добавив соответствующий классы. 

<ul id="list" style="line-height: 0.01;">
@foreach (var item in compInfo)
 {
  <li data-expanded="false" class="panel-handler company" data-id="@item.ID">@item.CompanyName
     @foreach (var scontractor in item.SubContractor)
        {
          <ul>
             <li class="panel-handler contractor" data-expanded="true" data-id="@subcontractor.ID">@scontractor.Name</li>
           </ul>
         }
   </li>
}

Тогда код для управления панелями станет более понятным. 

$(document).ready(function () {
$(".panel-handler").click(function (event) {
    $(".rpspanel,.sppanel").slideUp();
    var $this = $(this);
    // Show li clicked
    showInfo($this.data("id"));

    if ($this.hasClass('company')) {
       // If company then show all contractors under that company
       $this.find('.contractor').each( function(index, el) {
          showInfo($(el).data("id"));
       });
    } else if ($this.hasClass('contractor')) {
       // If contractor then show company for that contractor
       showInfo($this.closest('.company').data("id"));
    }

    return false;
});

function showInfo(id) {
    $("#" + id).slideDown();
}

// For first time load
$(".panel-handler:first").click();

});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...