Question

我在Bootstrap中有Collapse Panel，只需单击选项卡的标题即可打开。我试图弄清楚使用鼠标悬停在标签的总宽度上，但我没有得到它。下面是单个选项卡的代码，默认情况下是关闭的。

<div class="panel panel-default" style="background-color:#039;"> 
    <div class="panel-heading" style="background-color:#039;">
         <a  class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#panel-814345" href="#panel-element-566205">Software Development</a>
    </div>
    <div id="panel-element-566205" class="panel-collapse collapse" style="background-color:#039; color:#fff;">
        <div class="panel-body" style="border:none; font-size:14px; padding-bottom:0; margin-bottom:0;">
            We work for almost all web based application, database-driven systems, mapping and geo-spatial applications, and large content managed websites
            <br /><br /><p style="font-style:italic; font-weight:700;">Find out more</p>
        </div>
    </div>
</div>

如果我们将css类从class="panel-collapse collapse"更改为class="panel-collapse collapse in"，则该标签处于打开状态。能告诉我如何实现这个目标吗？

我得到了答案，但是只能通过HOVER工作，而不是TAB的全部宽度。下面的代码

$(function() {
    $(document).on('mouseenter.collapse', '[data-toggle=collapse]', function(e) {
        var $this = $(this),
            href, target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
            ,
            option = $(target).hasClass('in') ? 'hide' : "show";
            $('.panel-collapse').not(target).collapse("hide");
            $(target).collapse(option);
    })
});

我们可以将鼠标悬停在全宽上吗？

Answer 1

您可以使用hover函数

来实现此目的

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

但是只要鼠标离开标题标题，它就会关闭面板

Fiddle with hover

替代解决方案是mouseenter功能

$(".panel-heading").mouseenter(function () {
        $(".panel-collapse").fadeIn();
    });
 $(".panel-collapse").mouseleave(function(){
       $(".panel-collapse").fadeOut();
});

这样，只有当鼠标离开面板主体时，面板才会关闭。

Fiddle with mouseenter

Answer 2

您也可以将js悬停事件和collapse bootstrap methods组合为事件。如果我正确理解你的问题。

在Bootstrap中悬停打开折叠选项卡

2 个答案: