使頁面按下單擊到底部的Bootstrap Accordion Panel Body

Question

我在我的網站上有一個自舉手風琴，我正在嘗試使頁面向下滑動到面板主體的底部。目前，如果您點擊其中一幅圖像，您可能不會注意到它會擴展爲帶有圖片下單詞的手風琴。因此，當有人點擊圖片時，我希望頁面能夠點擊所選面板主體的底部。

要查看示例，請訪問：https://codepen.io/aahmed2/pen/rmEojo?editors=1000

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
<div class="row health-main"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading pet-health" alt="Cat on sidewalk" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" role="tab" id="headingTwo"> 
       <h2>Pet Health &amp; Safety</h2> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
       <div class="panel-body"> 
        <a href="/resources/pet-diseases.asp"><h4>Pet Diseases</h4></a> 
        <!--<a href="/resources/pet-allergies.asp"><h4>Pet Allergies</h4></a>--> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading livestock-health" alt="Young cow near barn" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="tab" id="headingThree"> 
       <h2>Livestock Health &amp; Safety</h2> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
       <div class="panel-body"> 
        <a href="/resources/livestock-disease.asp"><h4>Livestock Diseases</h4></a> 
        <!--<a href="/resources/livestock-allergies.asp"><h4>Livestock Allergies</h4></a>--> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading wildlife" alt="Raccoon" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" role="tab" id="headingSix"> 
       <h2>Wildlife Health &amp; Safety</h2> 
      </div> 
      <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"> 
       <div class="panel-body"> 
        <a href="/resources/wildlife-disease.asp"><h4>Wildlife Diseases</h4></a> 
        <a href="http://wildlife.unl.edu/damage-management"><h4>Wildlife Damage Management</h4></a> 
        <a href="/resources/wildlife-conservation.asp"><h4>Wildlife Conservation</h4></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="row health-main"> 
    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading human-health" alt="Person sitting next to dog in a park" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="tab" id="headingFour"> 
       <h2>Human Health &amp; Safety</h2> 
      </div> 
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> 
       <div class="panel-body"> 
        <a href="/resources/zoonotic-diseases.asp"><h4>Zoonotic Diseases</h4></a> 
        <a href="/resources/human-allergies.asp"><h4>Allergies</h4></a> 
        <a href="/resources/sanitation.asp"><h4>Sanitation</h4></a> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading insect-tick-mite" alt="Bee on flower" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" id="headingOne">   
       <h2>Insects, Ticks, and Mites</h2>    
      </div> 
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
       <div class="panel-body"> 
        <a href="/resources/insect-tick-mite.asp"><h4>Diseases</h4></a></a> 
        <a href="/resources/pests.asp"><h4>Pests</h4></a> 
        <a href="/resources/pollinator-health.asp"><h4>Pollinator Health</h4></a> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-md-4"> 
      <div class="panel-heading eco-health" alt="Woman holding child's hand walking down a trail" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" role="tab" id="headingFive">   
       <h2>Ecosystem Health</h2>    
      </div> 
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
       <div class="panel-body"> 
        <a href="/resources/plant-health.asp"><h4>Plant Health</h4></a> 
        <a href="/resources/water-quality.asp"><h4>Water Quality</h4></a> 
        <a href="/resources/air-quality.asp"><h4>Air Quality</h4></a> 
        <a href="/resources/soil-quality.asp"><h4>Soil Quality</h4></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

CSS

.health-main #accordion { 
    margin-top: 25px; 
    cursor: pointer; 
} 
.health-main #accordion2 { 
    margin-top: -19px; 
    cursor: pointer; 
    margin-bottom: 0px; 
} 
.health-main .panel-heading:focus { 
    border: none; 
    outline: 0; 
} 
.health-main .panel-group { 
    clear: both; 
} 
.health-main .panel-group .panel { 
    border-radius: 0%; 
    border-width: 0; 
    padding: 0 !important; 
} 
.health-main .panel-group .panel-heading { 
    background-color: rgba(0,0,0,1); 
    border-radius: 0%; 
    color: #fff; 
    height: 350px; 
    text-align: center; 
} 
.health-main .panel-group .panel-heading h2 { 
    font-size: 1.99em; 
    text-transform: none; 
    color: #fff; 
    margin-top: 140px; 
    text-shadow: 2px 2px 3px #333332; 
} 
.health-main .panel-group .panel-heading a:active, .health-main .panel-group .panel-heading a:visited, .health-main .panel-group .panel-heading a:focus { 
    text-decoration: none !important; 
} 
.health-main .panel-group .insect-tick-mite { 
    background: url(http://www.slate.com/content/dam/slate/articles/double_x/the_kids/2015/05/150522_KIDS_Tick.jpg.CROP.promo-mediumlarge.jpg) bottom no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .pet-health { 
    background: url(https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg) center center no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .livestock-health { 
    background: url(https://articles.extension.org//sites/default/files/styles/large/public/CalfEarlyIDFig1.jpg) center center no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .wildlife { 
    background: url(https://abcwildlife.com/wp-content/uploads/2015/05/Raccoon-Control-Identifying-Raccoon-Damage.jpg) center center no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .human-health { 
    background: url(https://www.gatescambridge.org/sites/www.gatescambridge.org/files/styles/flexslider_full_900x500/public/3node072child_and_dog.jpg?itok=Tsuklx_F) center center no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .eco-health { 
    background: url(http://guelph.ca/wp-content/uploads/trees.jpg) bottom no-repeat; 
    background-size: cover; 
} 
.health-main .panel-group .panel-collapse { 
    background-color: #c1c0be; 
} 
.health-main .panel-group .panel-body { 
    padding-top: 20px; 
    padding-bottom: 30px; 
    text-align: center; 
} 
.health-main .panel-group a { 
    color: #000000; 
} 
.health-main .panel-group a:hover { 
    color: #fff; 
    text-decoration: none; 
} 
.health-main .panel-group > .panel { 
    margin-top: 5px; 
} 

Answer 1

你需要做的是鉤在白手起家顯示事件的手風琴shown.bs.collapse。這樣可以在手風琴完成展開後獲得包裝元素的高度。然後你擁有了你需要的一切來實現你想要的。我已經評論了代碼，以幫助您瞭解我所做的事情。該腳本應放置在jQuery和Bootstrap JS包含之後。

<script type="text/javascript"> 
    $(document).ready(function() { 
    // do something when accordion has finished expanding the relevent element 
    $('.panel-collapse').on('shown.bs.collapse', function() { 
     // $(this).parent().offset().top gets the top position of the parent element. 
     // $(window).height() gets the height of the window. 
     // $(this).parent().height() gets the height of the parent element. 
     // Subtract the top position of the parent element by the height of the window minus the height of the parent elements height. 
     var scroll = $(this).parent().offset().top - ($(window).height() - $(this).parent().height()); 
     // animate the window scroll by the stored scroll variable. 
     // The 500 is how long the scroll takes in milliseconds.  
     $('html, body').animate({ 
     scrollTop: scroll 
     }, 500); 
    }) 
    }); 
</script>