Bootstrap 3在懸停時崩潰

Question

我正在這里工作。 http://opennetsummit.wpengine.com/

向下第二部分中的三個圖像在單擊時觸發自舉折疊功能。 我希望它們在懸停時顯示，並且在不懸停時隱藏。

我需要更改什么？

<script>
        $(".paneltab1").hover(
     function() {
        $('#collapsePanel1').collapse('show');
      }, function() {
        $('#collapsePanel1').collapse('hide');
      }
    );
</script>

<div class="row panel-heading">
<div class="container">
    <div class="col-xs-3">
        <a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
            <div class="panel-tabs">
                <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
                <h3>Workshops</h3>
            </div>
        </a>
    </div>


    <div class="col-xs-3 ">
        <a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
            <div class="panel-tabs">
                     <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
                     <h3>Open Networking Summit</h3>
            </div>
        </a>
    </div>

    <div class="col-xs-3 ">
        <a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
            <div class="panel-tabs">
                <div>
                    <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
                    <h3>Webinars</h3>
                </div>
            </div>
        </a>
    </div>

    <div class="col-xs-3 ">
            <div class="panel-tabs">
                <div class="mid-form">
                                                        <h3>Get Updates</h3>

                                                        </div>
            </div>
    </div>
    </div>
</div>  


<div class="collapse" id="collapsePanel1">
<div class="row">
    <div class="container">
      <div class="col-xs-12 hompage-panel">
            <div class="col-sm-4 center">
                <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
            </div>
            <div class="col-sm-8">
                <h2>Defy Protocol </h2>
                <h1>EMBRACE {OPEN} SOFTWARE</h1>
                <h3>Open Networking Summit</h3>
                <hr>
                <p>June 15 - 18, 2015</p>
                <p>Santa Clara Convention Center</p>
                <a href="#" class="btn btn-more">More Information</a>       
            </div>
      </div>
    </div>
</div>
</div>

<div class="collapse" id="collapsePanel2">
<div class="row">
    <div class="container">
      <div class="col-xs-12 hompage-panel">
            <div class="col-sm-4 center">
                <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
            </div>
            <div class="col-sm-8">
                <h2>Panel 2 </h2>
                <h1>EMBRACE {OPEN} SOFTWARE</h1>
                <h3>Open Networking Summit</h3>
                <hr>
                <p>June 15 - 18, 2015</p>
                <p>Santa Clara Convention Center</p>
                <a href="#" class="btn btn-more">More Information</a>       
            </div>
      </div>
    </div>
</div>
</div>

<div class="collapse" id="collapsePanel3">
<div class="row">
    <div class="container">
      <div class="col-xs-12 hompage-panel">
            <div class="col-sm-4 center">
                <img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
            </div>
            <div class="col-sm-8">
                <h2>Panel 3 </h2>
                <h1>EMBRACE {OPEN} SOFTWARE</h1>
                <h3>Open Networking Summit</h3>
                <hr>
                <p>June 15 - 18, 2015</p>
                <p>Santa Clara Convention Center</p>
                <a href="#" class="btn btn-more">More Information</a>       
            </div>
      </div>
    </div>
</div>

Answer 1

您可以將jquery的鼠標懸停與bootstrap的折疊javascript結合使用，如下所示：

$(".panel-tabs").hover(
 function() {
    $('#collapsePanel3').collapse('show');
  }, function() {
    $('#collapsePanel3').collapse('hide');
  }
);

第一個function（）{}用於鼠標進入，第二個用於鼠標離開。

更多信息在這里：

• http://api.jquery.com/hover/
• http://getbootstrap.com/javascript/#collapse-methods

Answer 2

我使用GetElementbyID在mouseover上將類從“ collapse”更改為“ collapse in”，在mouseout上將類從“ collapse in”更改為“ collapse”，並且效果很好。

document.getElementById（“ panelid”）。className =“塌陷”;