CSS可見性隱藏或摺疊不起作用

Question

美好的一天！

我的問題是：即使條件的答案是真的，右箭頭也不會崩潰。它只在將窗口調整爲較小尺寸時才起作用，但當我嘗試將其調整爲較大尺寸時，它不會。

也許我錯過了一些東西。希望你能幫助我。先謝謝你。

這裏的片段（請展開）

 

 
$('#left-button').css({visibility: 'collapse'}); 
 
$('#right-button').click(function() { 
 
\t event.preventDefault(); 
 
\t $('#content').animate({ 
 
\t \t scrollLeft: "+=160px" 
 
\t }, "moderate"); 
 
}); 
 
    
 
$('#left-button').click(function() { 
 
\t event.preventDefault(); 
 
\t $('#content').animate({ 
 
\t \t scrollLeft: "-=160px" 
 
\t }, "moderate"); 
 
}); 
 
    
 
$('#content').scroll(function() { 
 
\t if (this.scrollWidth - $(this).scrollLeft() <= $(this).width() + 0){ 
 
\t \t console.log('right end'); 
 
\t \t $('#right-button').css({visibility: 'collapse'}); 
 
\t \t $('#left-button').css("visibility","visible"); 
 
\t } 
 
      
 
\t if ($(this).scrollLeft() == 0) { 
 
\t \t console.log('left end'); 
 
\t \t $('#right-button').css("visibility","visible"); 
 
\t \t $('#left-button').css("visibility","collapse"); 
 
\t } 
 
      
 
\t if (($(this).scrollLeft() != 0)&&(this.scrollWidth - $(this).scrollLeft() > $(this).width() + 0)) { 
 
\t \t console.log('mid'); 
 
\t \t $('#right-button').css("visibility","visible"); 
 
\t \t $('#left-button').css("visibility","visible"); 
 
\t } 
 
      
 
});

.left{ 
 
height: 154px; 
 
border: 0; 
 
    text-align: right; 
 
} 
 

 
.right{ 
 
height: 154px; 
 
border: 0; 
 
text-align: left; 
 
} 
 

 
div.internal{ 
 
margin-right: 10px; 
 
min-width: 150px; 
 
max-width:150px !important; 
 
min-height: 150px; 
 
max-height:150px; 
 
border-radius: 100%; 
 
border: 2px solid transparent; 
 
padding: 0; 
 
overflow: hidden !important; 
 
box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
img{ 
 
min-width: 146px; 
 
max-width:146px !important; 
 
min-height: 146px; 
 
max-height:146px; 
 
} 
 

 
div.internal:hover{ 
 
border: 2px solid orange; 
 
overflow: hidden !important; 
 
box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
.center{ 
 
width: 954px; 
 
height: 152px; 
 
overflow: hidden !important; 
 
/*will change this to hidden later to deny scolling to user*/ 
 
white-space: nowrap; 
 
border-radius: 76px 76px 76px 76px; 
 
font-size: 0px; 
 
display: flex; 
 
/*border: 1px solid black;*/ 
 
} 
 

 

 
#left-button, #right-button{ 
 
    vertical-align:sub; 
 
    font-size: 50px; 
 
    font-weight: bolder; 
 
    cursor:pointer; 
 
    text-align: center; 
 
} 
 
.fa-angle-right,.fa-angle-left{ 
 
    padding-top:50px; 
 
} 
 
.content{ 
 
    display: flex; 
 
    max-height: 154px; 
 
    margin:auto; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-12 content"> 
 
    <div class="left"> 
 
     <span id="left-button"> 
 
     <i class="fa fa-angle-left" style="float: right"></i>&nbsp; 
 
     </span> 
 
    </div> 
 
    <div class="center" id="content"> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
     <div class="internal"> 
 
      <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png"> 
 
     </div> 
 
    </div> 
 
    <div class="right"> 
 
     <span id="right-button">&nbsp; 
 
     <i class="fa fa-angle-right" style="float: left"></i> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我已經發現了兩個問題...

1. 隨着你提供的代碼，你永遠不進入「右端」的條件。在if裏面的操作從來都不是真的，因爲有一點區別（0.4 ...），所以永遠不會進入。我不知道它會在哪裏（可能是一些填充），我已經能夠使它工作使用0.5而不是0，但檢查它看看是否有更好的價值。

2. 另一方面，您在這三種情況下使用if，當您到達右邊時，它會執行，但也會進入第三個選項並再次顯示該按鈕。您可以使用else if解決第二個和第三個條件。

在這裏，你有一個工作的小提琴......

https://fiddle.jshell.net/rigobauer/k5ck3ssr/

我希望它能幫助