Bootstrap 3在悬停时折叠 [英] Bootstrap 3 Collapse on hover

查看：132
本文介绍了Bootstrap 3在悬停时折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在这里工作。 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 =paneltab1data-toggle =collapsehref =＃collapsePanel1aria-expanded =falsearia-controls =collapsePanel1> 
< div class =panel-tabs> 
< img src =http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png> 
< h3>研讨会< / h3> 
< / div> 
< / a> 
< / div> 
 
 
< div class =col-xs-3> 
< a class =data-toggle =collapsehref =＃collapsePanel2aria-expanded =falsearia-controls =collapsePanel2> 
< div class =panel-tabs> 
< img src =http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png> 
< h3>开放网络峰会< / h3> 
< / div> 
< / a> 
< / div> 
 
< div class =col-xs-3> 
< a class =data-toggle =collapsehref =＃collapsePanel3aria-expanded =falsearia-controls =collapsePanel3> 
< div class =panel-tabs> 
< div> 
< img src =http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png> 
< h3>网络研讨会< / h3> 
< / div> 
< / div> 
< / a> 
< / div> 
 
< div class =col-xs-3> 
< div class =panel-tabs> 
< div class =mid-form> 
< h3>获取更新< / h3> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
 
< div class =collapseid =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协议< / h2> 
< h1> EMBRACE {OPEN}软件< / h1> 
< h3>开放网络峰会< / h3> 
< hr> 
< p> 2015年6月15日至18日< / p> 
< p>圣克拉拉会议中心< / p> 
< a href =＃class =btn btn-more>更多信息< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =collapseid =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>面板2< / h2> 
< h1> EMBRACE {OPEN}软件< / h1> 
< h3>开放网络峰会< / h3> 
< hr> 
< p> 2015年6月15日至18日< / p> 
< p>圣克拉拉会议中心< / p> 
< a href =＃class =btn btn-more>更多信息< / a> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< div class =collapseid =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>面板3< / h2> 
< h1> EMBRACE {OPEN}软件< / h1> 
< h3>开放网络峰会< / h3> 
< hr> 
< p> 2015年6月15日至18日< / p> 
< p>圣克拉拉会议中心< / p> 
< a href =＃class =btn btn-more>更多信息< / a> 
< / div> 
< / div> 
< / div> 
< / div>


解决方案

  $（。panel-tabs）可以使用jquery的悬停和bootstrap的折叠javascript，如下所示： ）.hover（
 function（）{
 $（'＃collapsePanel3'）。collapse（'show'）; 
}，function（）{
 $（'＃ collapsePanel3'）。collapse（'hide'）; 
} 
）;

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



更多信息：


I'm working on this site here. http://opennetsummit.wpengine.com/

The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.

What do I need to change? 

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

解决方案

You can use jquery's hover along with bootstrap's collapse javascript, something like this:

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

The first function(){} is for when the mouse enters, the second for when it leaves.

More info here:

这篇关于Bootstrap 3在悬停时折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆