问题

我有超级标准’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