Jquery slideToggle和hover问题

时间：2015-06-08 16:16:29

标签： jquery html css jquery-mobile

我正在开发一个包含团队成员照片的页面。当你点击他们的照片时，我正在使用JQuery slideToggle功能让他们的每个描述都向下滑动。我还希望他们的名字在悬停在他们的照片上时显示，并在他们的描述显示时保持他们的名字。有没有办法让这两个功能协同工作？我使用CSS悬停效果，但它不能使用Jquery函数。

我与此页面相关的另一个问题是它如何分解为移动设备。我有一个用于桌面的三列布局和一个用于移动的两列布局。当我使用照片组织我的HTML时，然后在它之后直接匹配描述会导致该行中的所有照片向下滑动。我希望每行中的照片始终保持彼此相邻。我可以做的另一件事是将HTML组织成三张照片，然后是三张描述。由于两列布局，这会在移动视图中导致问题。

非常感谢任何建议！

这是我的HTML（第一张照片有悬停效果，其余照片只有slideToggle功能）

$('img[data-char=togglephoto1]')
$(function() {
  $('.toggledesc').hide();

  $('.togglephoto').on('click', function() {
    var toggleid = $(this).attr('data-toggleid');
    $('.toggledesc').not('.' + toggleid).slideUp("slow")
    $('.' + toggleid).slideToggle("slow");
  });

});
.portfoliowork {
  width: 33%;
  float: left;
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1%;
}
.textappear {
  position: absolute;
  top: 20px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 20px 20px 20px;
  color: #f00;
  background-color: rgba(255, 255, 255, .9);
  width: 100%;
  height: 100%;
  line-height: 100px;
  text-align: center;
  z-index: 10;
  opacity: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.textappear:hover {
  opacity: 1;
}

.workimg {
  z-index: 1;
}

.appearimg {
  width: 33%;
  display: block;
  position: relative;
}

@media screen and (max-width: 500px) {
  .portfoliowork {
    width: 50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfoliowork appearimg">
  <div class="textappear">
    <p>Name should appear here</p>
  </div>
  <img src="images/portfolioph.jpg" class="togglephoto workimg" data-toggleid="toggledesc4">
</div>

<div class="portfoliowork">
  <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5">
</div>

<div class="portfoliowork">
  <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc6">
</div>

<div class="whowearetext toggledesc toggledesc4">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

<div class="whowearetext toggledesc toggledesc5">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>


<div class="whowearetext toggledesc toggledesc6">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

<div class="portfoliowork">
  <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc7">
</div>

<div class="portfoliowork">
  <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc8">
</div>

<div class="portfoliowork">
  <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc9">
</div>

<div class="whowearetext toggledesc toggledesc7">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>


<div class="whowearetext toggledesc toggledesc8">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>


<div class="whowearetext toggledesc toggledesc9">
  <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

2 个答案:

答案 0 :(得分：0)

简化您的HTML：

mon
$('.portfoliowork').click(function(){$('.portfoliowork').not(this).removeClass('active');$(this).toggleClass('active');});
.portfoliowork { overflow:hidden; float: left; margin-left: 5px; width: calc(100% / 3 - 15px); margin-bottom: 200px }
.portfoliowork img { width: 100%; height: auto; }
.portfoliowork p { position: absolute; left:0; display: none; }
.portfoliowork.active p {display: block;}

答案 1 :(得分：0)

我试图解决您的问题，而不是在点击事件时将鼠标显示在鼠标上显示。请检查输出： https://jsfiddle.net/nu5mbqcd/2/

要实施此解决方案，请一步一步：

步骤1：替换以下代码

  <img src="images/portfolioph.jpg" class="togglephoto"   data-toggleid="toggledesc5" >

通过

   <div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left"> 

      <img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5" tid="">
      <div class="tool-tip right">Name1</div>
  </div>

第2步：添加css 

.tool-tip{
   color: #fff;
   background-color: rgba( 0, 0, 0, .7);
   text-shadow: none;
   font-size: .8em;
   visibility: hidden;
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    -o-border-radius: 7px; 
    border-radius: 7px; 
    text-align: center; 
    opacity: 0;
    z-index: 999;
   padding: 3px 8px;    
   position: absolute;
   cursor: default;
    -webkit-transition: all 240ms ease-in-out;
    -moz-transition: all 240ms ease-in-out;
    -ms-transition: all 240ms ease-in-out;
    -o-transition: all 240ms ease-in-out;
    transition: all 240ms ease-in-out;  
   }

/ *工具提示位置右* / 

.tool-tip.right{
    top: 50%;
    right: auto;
    left: 106%;
    margin-top: -15px;
    margin-right: auto; 
    margin-left: auto;
}

.tool-tip.right:after{
    left: -5px;
    top: 50%;   
    margin-top: -6px;
    bottom: auto;
    border-top-color: transparent;  
    border-right-color: rgba( 0, 0, 0, .7); 
}


/* on hover of element containing tooltip default*/

.on-focus img[tid="1"] + .tool-tip{
    visibility: visible;
    opacity: 1;
    -webkit-transition: all 240ms ease-in-out;
    -moz-transition: all 240ms ease-in-out;
    -ms-transition: all 240ms ease-in-out;
    -o-transition: all 240ms ease-in-out;
    transition: all 240ms ease-in-out;      
}

步骤3：通过以下代码替换jquery代码：

 $('img[data-char=togglephoto1]')
    $(function(){
    $('.toggledesc').hide();

    $('.togglephoto').on('click', function(){
        var toggleid = $(this).attr('data-toggleid');

        if( $('.' +toggleid).is(":hidden")) {
            $(this).attr('tid','1');  
         }
        else {
            $(this).attr('tid','');     
        }
        $('.' +toggleid).slideToggle("slow");

    });

  });

希望这会对你有所帮助。

相关问题
最新问题