JQuery的：開/關

Question

我的網站我試圖做一些JQuery的我本以爲這是簡單的（作爲一個初學者）切換CSS屬性：

• 在新聞標題點擊一個div /按鈕。
• 因此，將其中的圖像旋轉/替換（箭頭）。
• 因此，在標題下的div中創建一個滾動條。
• 再次點擊div /按鈕，它會切換回原來的位置。

我已經成功地使事情的工作，但只有兩個單獨的div /箭頭，這適用於以下方式：

$(document).ready(function(){ 
    $('.scroll').css('cursor', 'pointer').on('click', function() { 
     $('.news-section-links-internal-1').css({ 
      overflow: 'scroll', 
      marginRight: '0px', 
      width: '230px', 
      paddingRight: '15px' 
     }); 
    }); 

    $('.noscroll').css('cursor', 'pointer').on('click', function() { 
     $('.news-section-links-internal-1').css({ 
      overflow: 'hidden', 
      marginRight: '15px', 
      width: '225px', 
      paddingRight: '0px' 
     });    
    }); 
}); 

它看起來有點粗了，所以我一直在努力結合這段代碼，所以它可以與基於Stackoverflow上的技巧的一個切換div /按鈕一起工作。下面是一個例子：

$(document).ready(function(){ 
    $(".scroll").css('cursor', 'pointer').toggle(function() { 
     $('.news-section-links-internal-1').css({    
      overflow: 'scroll', 
      marginRight: '0px', 
      width: '230px', 
      paddingRight: '15px' 
     }); 
    }, function() { 
     $('.news-section-links-internal-1').css({    
      overflow: 'hidden', 
      marginRight: '15px', 
      width: '225px', 
      paddingRight: '0px' 
     }); 
    }); 
}); 

不幸的是，合併後的代碼永遠不會奏效。在上面的例子中，當我加載頁面時，切換div /按鈕只是淡出，就是這樣。

任何人都可以幫我解決這個問題嗎？我的頁面上並不需要大量的JQuery，但這非常重要。已經嘗試了兩天。

如果有幫助，這裏的所有相關的CSS：

.news-section-links { 
    background-color: #fffffc; 
    width: 245px !important; 
    padding-right: 0px; 
    padding-left: 5px; 
    padding-top: 1px; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    border-bottom: 1px solid #000; 
} 

.news-section-links-internal-1 { 
    width: 225px; 
    height: 200px; 
    background-color: #fffffc; 
    margin-right: 15px; 
    overflow: hidden; 
} 

Answer 1

嗨，現在你可以試着toggleClass爲這樣。

$(document).ready(function(){ 
 
    $(".scroll").on('click', function(){ 
 
     $('.news-section-links-internal-1').toggleClass('class-1'); 
 
    });  
 
});

.class{ 
 
    overflow:hidden; 
 
      margin-right: 15px; 
 
      width: 225px; 
 
      padding-right: 0; 
 
} 
 
.class-1.class{ 
 
      margin-right: 0; 
 
      width: 230px; 
 
      padding-right: 15px; 
 
    overflow:scroll; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="news-section-links-internal-1 class">This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text This is Demo text </div> 
 

 

 
<button class="scroll">Click here for result</button>

更多信息toggleClass