尝试使用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，具体而言，将其向上移动 84 像素。

答案可能很简单，我觉得问起来有点傻，但是我的代码有点长，让我无法理解应用 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>

Answer 2

您可以使用简单的JS根据您的要求设置顶部和左侧 -

document.getElementById("myBtn").style.left = "100px";
document.getElementById("myBtn").style.top = "100px";

Answer 3

这个 sn-p 是您可以使用 JS 做到这一点的一千种方法之一：

function toogleClass() {
    var divhasClass = document.getElementById("onlyTouchDevices").classList;
    if (divhasClass.contains("showMore")) {
      divhasClass.remove("showMore");
    } else {
      divhasClass.add("showMore");
    }
  }

.home_1 {
  width: 600px;
  height: 300px;
  margin: 0px 0px 96px 0px;
  overflow: hidden;
  background-color: lightblue;
  background-size: 600px 300px;
  border-radius: 8px;
}
.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;
}
.showMore {
  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);
}
h3 {
  margin: 0 0 18 0;
  font-weight: lighter;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 18px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

<div class="home_1">
  <div class="h_1_text_box" id="onlyTouchDevices">
    <h3>Our Concept</h3>
    <img class="icon" src="up_down_icon.png" onclick="toogleClass()" />
    <p>Text here</p>
  </div>
</div>

我在这里所做的只是切换了添加/重置悬停该元素时使用的top 间距的类。

Answer 4

也许这会对你有所帮助，运行我的代码 sn-p 并检查一下

$('.icon').click(function(){
	$('.h_1_text_box').css('position','relative');
  $('.h_1_text_box').css('top','171px');
  $('.h_1_text_box').css('background-color','rgba(0, 0, 0, 0.9)');
})

.home_1 {
    width: 600px;
    height: 300px;
    margin: 0px 0px 96px 0px;
    overflow: hidden;
    background-color: lightblue;
    background-size: 600px 300px;
    border-radius: 8px;
}

.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;
}



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

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

h3 {
	margin: 0 0 18 0;
	font-weight: lighter;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 18px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>