Jquery slideToggle和悬停问题

Question

我正在开发一个包含团队成员照片的页面。当您单击他们的照片时，我正在使用 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>

Answer 1

简化您的 HTML：

$('.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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfoliowork">
  <img src="http://placehold.it/100x100">
  <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="http://placehold.it/100x100">
  <p>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="http://placehold.it/100x100">
  <p>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="http://placehold.it/100x100">
  <p>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>

Answer 2

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

要实施此解决方案，请逐步进行：

step1：替换以下代码

  <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");

    });

  });

希望这会对你有所帮助。