Question

所以我试图创建一个在隐藏状态和可见状态之间切换的按钮。事实是，我讨厌先用javascript隐藏该元素（因为它已经可见），然后创建一个在状态之间切换的函数。

我有此代码

jQuery('.prescriptions.eyeris-prescription.quote-item-options').css('visibility', 'collapse');
jQuery('<img />').attr({
      src:'https://cdn.eyerim.com/skin/frontend/eyerim/default/images/icons/ico_arrow_down.svg',
      content: '',
      display: 'block',
      width: '15px',
     height: '15px',
     class: 'dropdown-button',
}).appendTo(jQuery('#shopping-cart-form'));


jQuery(document).ready(function(){
  jQuery('#dropdown-button').click(function(){
    jQuery('.prescriptions.eyeris-prescription.quote-item-options').toggle();
  });
});

在我定义的第一行中隐藏元素，这有效。

然后我创建了一个按钮，并将其附加到同样起作用的元素上。

但是现在我无法正确使用该功能在状态之间进行切换。

你能帮我吗？

Answer 1

删除此行：

jQuery('.prescriptions.eyeris-prescription.quote-item-options').css('visibility', 'collapse');

使用CSS隐藏元素：

.prescriptions.eyeris-prescription.quote-item-options {
   display: none;
}

然后使用Jquery切换元素：

jQuery('#dropdown-button').click(function(){
    jQuery('.prescriptions.eyeris-prescription.quote-item-options').toggle();
});

Answer 2

可以使用的确是这样：

myElement.classList.toggle('is-visible')

要切换给定的类，请在 2019 中通过部署HTML5 data-*来指示 元素状态 自定义属性。

例如

data-is-visible="true"
data-is-visible="false"

工作示例：

const myButton = document.getElementsByClassName('my-button')[0];
const myDiv = document.getElementsByClassName('my-div')[0];

const toggleDiv = () => {
  myDiv.dataset.isVisible = (myDiv.dataset.isVisible === 'false') ? 'true' : 'false';
}

myButton.addEventListener('click', toggleDiv, false);

.my-button,
.my-div {
  display: inline-block;
  vertical-align: middle;
}

.my-div {
  width: 100px;
  height: 100px;
  margin-left: 24px;
  background-color: rgb(255, 0, 0);
  transition: opacity 1s linear;
}

.my-div[data-is-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

.my-div[data-is-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

<button type="button" class="my-button">Toggle Visibility</button>
<div class="my-div" data-is-visible="false"></div>

切换元素的可见性

2 个答案: