javascript - Bootstrap 3 悬停时折叠

Question

我在这个网站上工作。 http://opennetsummit.wpengine.com/

第二部分中的三个图像会在点击时触发 Bootstrap 折叠功能。我希望它们在悬停时显示，不悬停时隐藏。

我需要改变什么？

<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 的 hover 和 bootstrap 的 collapse javascript，像这样:

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

第一个 function(){} 用于鼠标进入时，第二个用于鼠标离开时。

更多信息在这里:

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