引导 3 悬停时折叠

Bootstrap 3 Collapse on hover

本文关键字：折叠 悬停 引导      更新时间：2023-09-26

我在这里做这个网站。 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>

你可以使用 jquery 的悬停和 bootstrap 的 collapse javascript，如下所示：

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

第一个函数（）{}用于鼠标进入时，第二个函数用于鼠标离开时。

更多信息在这里：

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

我使用 GetElementbyID 将类从鼠标悬停时的"折叠"更改为"折叠"，在鼠标退出时从"折叠"更改为"折叠"，它工作正常。

document.getElementById（"panelid"）.className = "collapse in";

相关文章：