Question

我遇到了在我正在创建的Liferay结构上实现Bootstrap崩溃的问题。该结构是一个链接图像，当用户将鼠标悬停在其上时，会淡入另一个图像，并且有一个文本折叠的信息框。一切都很好，但如果我在collapsein完成之前鼠标移动，div将保持而不是折叠就自己而言。这是它的代码（为了简单起见，我删除了所有的Velocity）：

$(document).ready(function(){
  $(".panel-links-strt .img-container").hover(                 
    function(){
      $(this).find(".collapse-panel-info").stop().collapse("show");
      $(this).find(".PanelHoverImage").stop().fadeTo(150, 1);
      $(this).find(".PanelMainImage").stop().fadeTo(250, 0);

    },
    function(){  
      $(this).find(".collapse-panel-info").stop().collapse("hide");
      $(this).find(".PanelMainImage").stop().fadeTo(250, 1);
      $(this).find(".PanelHoverImage").stop().fadeTo(150, 0);
    });
});

.panel-link-title{
  color: black;
  margin-bottom: 0; 
  font-weight: bold;
  padding: 4px 10px 4px 10px;
}

.panel-link-title-background{
  background-color: white; 
  display: inline-block;
  position:absolute;
  z-index: 8;
  border-bottom-right-radius: 5px;
  max-width: 130px; 
}

.panel-links-strt .img-container{
  float: left;
  display: inline-block;
  margin: 5px;
  position: relative
}

.panel-links-strt .PanelMainImage{
  position: absolute;
  z-index: 2;
}
.panel-links-strt .PanelHoverImage{
  position: absolute;
  z-index:1;
}

.panel-links-strt.hover-photo-container a:hover{
  text-decoration:none;
}
a.hover-photo-container{
  height: 240px; 
  width: 240px;
}

.collapse-panel-info{
  background-color: black;
  position: absolute;
  z-index: 12;
  bottom:0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  text-align: center;
}
.collapse-panel-info-text{
  padding: 8px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-links-strt hover-photo-container"> 
  <a class="hover-photo-container" style="height: 240px; width: 240px;" href="testlink.com">
    <div class="img-container" style="height: 240px; width: 240px;">
      <div class="panel-link-title-background">
        <p class="panel-link-title">Test Title</p>
      </div> 
      <img style="height: 240px; width: 240px;" class="PanelMainImage" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png">
      <img style="height: 240px; width: 240px;" class="PanelHoverImage" src="http://necessaries.tk/images/testPattern.png">
      <div class="collapse-panel-info collapse" style="height:80px; width:240px;">
        <div class="collapse-panel-info-text">
          Test Panel Text
        </div>
      </div>
    </div>
  </a>
</div>

崩溃后我有什么问题吗？

谢谢！

Answer 1

我最终没有得到答案，但我工作的开发人员找到了解决方案。我没有使用折叠，而是使用了slideUp（）和slideDown（），它运行得很好。

这是我的新JavaScript：

 $(document).ready(function(){
    $(".panel-links-strt .img-container").hover(                 
        function(){
            $(this).find(".collapse-panel-info").stop().slideDown(400);
            $(this).find(".PanelHoverImage").stop().fadeTo(150, 1);
            $(this).find(".PanelMainImage").stop().fadeTo(250, 0);

        },
        function(){  
            $(this).find(".collapse-panel-info").stop().slideUp(200);
            $(this).find(".PanelMainImage").stop().fadeTo(250, 1);
            $(this).find(".PanelHoverImage").stop().fadeTo(150, 0);
        });
});

Bootstrap折叠“隐藏”，同时折叠不起作用

1 个答案: