試圖改變使用js點擊div的位置

Question

我正在編輯一個網站在平板電腦上使用，但顯然沒有我的：懸停僞類將工作。

我想移動一個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

只需添加一個事件偵聽器，你的圖標將監聽click事件。 然後你只需要添加一個css類到父元素。你已經擁有了你定義的所有你需要的CSS。

這裏是一個例子。

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

 
upDownIcon.addEventListener('click', function(e) { 
 
\t 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

這個片段是用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

可能這會幫助你，我的代碼運行段，並檢查它

$('.icon').click(function(){ 
 
\t $('.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 { 
 
\t margin: 0 0 18 0; 
 
\t font-weight: lighter; 
 
\t -webkit-margin-before: 0px; 
 
\t -webkit-margin-after: 18px; 
 
\t -webkit-margin-start: 0px; 
 
\t -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>