javascript - 使用js单击时尝试更改div的位置

Question

我正在编辑一个用于平板电脑的网站，但显然我的 :hover 伪类都不起作用。

我想向上移动一个 div 以显示与悬停时相同的文本量，但我希望它在我单击“up_down_icon.png”时发生。

这是我的 html:

<div class="home_1">
    <div class="h_1_text_box">
        <h3>Our Concept</h3>
        <img class="icon" src="up_down_icon.png">
        <p>Text here</p>
    </div>
</div>

还有 CSS:

.h_1_text_box {
background-color: rgba(0, 0, 0, 0.5);
padding: 12px 16px 24px 16px;
color: #ffffff;
font-family: Franklin Gothic;
position: relative;
top: 255px;
transition: 0.5s ease;
}

.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}

.icon {
width: 24px;
height: 24px;
position: absolute;
top: 11px;
left: 560px;
transition: 0.5s ease;
}

.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}

从字面上看，我只需要知道如何将位置更改应用于 .h_1_text_box，具体来说，将其向上移动 84px。

答案可能会非常简单，我觉得这样问有点傻，但我的代码有点长，让我无法集中精力应用 JS。我还没有找到任何足够具体的东西来帮助我。如果我必须更改 HTML 中任何内容的顺序，我不介意。

感谢您的帮助。

Answer 1

只需向您的图标添加一个事件监听器，它将监听点击事件。 然后你只需要向父元素添加一个 css 类。你已经在你的 CSS 中定义了你需要的一切。

这是一个例子。

var upDownIcon = document.getElementsByClassName('icon').item(0);

upDownIcon.addEventListener('click', function(e) {
	e.target.parentNode.classList.toggle('move_up_down');
}, false)

.h_1_text_box {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 12px 16px 24px 16px;
  color: #ffffff;
  font-family: Franklin Gothic;
  position: relative;
  top: 100px;
  transition: 0.5s ease;
}

.h_1_text_box.move_up_down {
  position: relative;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.9);
}

/*
.h_1_text_box:hover {
position: relative;
top: 171px;
background-color: rgba(0, 0, 0, 0.9);
}
*/

.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 11px;
  left: 560px;
  transition: 0.5s ease;

  /* this is just for the span*/
  font-size: 26px;
  cursor: pointer;
}

.h_1_text_box.move_up_down > .icon {
  transform: rotate(-180deg);
}

/*
.h_1_text_box:hover > .icon {
transform: rotate(-180deg);
}
*/

<div class="home_1">
  <div class="h_1_text_box">
    <h3>Our Concept</h3>
    <span class="icon">&#8645;</span>
    <!--<img class="icon" src="up_down_icon.png">-->
    <p>Text here</p>
  </div>
</div>