Click jQuery問題上的toggleClass

toggleClass on Click jQuery Issue

來源: link 標籤:jquery 更新時間:

  問題

我有超級標準’View更多’按鈕,然後單擊它變成’View更少’.

出於某種原因,我的程式碼不起作用,我不明白為什麼.

我嘗試更改JS一點不同的解決方案,但我無法弄清楚.

我想點選顯示更多/顯示更少

連結到codepen:

https://codepen.io/vasilkrumov/pen/YzzKzoj 

 $('body').on('click', '.js-toggle-handle', function(e) {
  e.preventDefault()
  $(this)
    .find('.js-toggle-handle')
    .toggleClass('hidden')
}) 
 .js-toggle-handle.notification-preferences-toggle-button.desktop.hidden {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show More</a>

<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop hidden" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show Less</a>

  最佳答案

在委託單擊中,$(this)指的是 .js-toggle-handle,而不是 body。

你只需要這個 

 $('body').on('click', '.js-toggle-handle', function(e) {
  e.preventDefault()
  $('.js-toggle-handle').toggleClass('hidden')
}) 
 .hidden {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show More</a>

<a href="#" class="js-toggle-handle notification-preferences-toggle-button desktop hidden" <i class="icon-angle-up js-toggle-indicator" data-icon="arrow-up"></i>Show Less</a>

  相同標籤的其他問題

jquery
上一個問題:
下一個問題: