Question

我有超级标准的“查看更多”按钮，然后单击它就变成“查看更少”。

由于某种原因，我的代码无法正常工作，我也不明白为什么。

我尝试过对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>

Answer 1

您委派的点击中的

$(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 Issue的toggleClass

1 个答案: