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/

實現此解決方案，請走一步看一步：

第一步：通過

<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替換下面的代碼

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

：添加的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"); 

    }); 

    }); 

希望這會幫助你。