How can i load panel by id?

问题

I have two panel rpspanel and sppanel Panel how can i show or hide them based on the selected list ID?

I have this list:

 <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>

On <li> list click i want to hide or show, if the nested clicked i want clicked show sppanel if the parent list clicked i want to show rpspanel

I'm able to hides and show rpspanel when the parent <li> clicked, I used this JQuery but i cant handle the nested list

<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>

My First Panel:

  @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>
    }

My Second Panel

@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:

$(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 bubbles up events to the parent elements, which results in a click on the nested li to call $(".panel-handler").click() for the nested li and then bubble up to call it for the parent li. This bubbling makes it appear as if the click on the nested li isn't occurring.

To prevent the bubbling return false from the click handler. Read up on bubbling events and returning false versus calling event.preventDefault(), event.stopPropagation(), and event.stopImmediatePropagation().

I would first differentiate the Company li's from the Contractor li's by adding the appropriate classes.

<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>
}

Then the code to manage the panels becomes clearer.

$(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();

});

来源：https://stackoverflow.com/questions/61512047/how-can-i-load-panel-by-id

标签

javascript

html

jquery

twitter-bootstrap