为现有按钮创建悬停下拉列表

问题描述

我想为现有按钮创建一个悬停下拉列表。 在 hybris CMS 系统中，我有一个按钮，名为：applications_pharma_button1 我有一个包含三个链接的容器：容器名为：applications_pharma_links1 当我将鼠标悬停在我的按钮上时，我希望显示容器列表 我是新手，无法解决。 有人可以帮忙吗？感谢您的帮助 我用过这个代码。这很好用。但我想将容器中的现有链接列表添加到现有按钮。

#dropbtn1 {
background-color: transparent;
color: white;
padding: 16px;
font-size: 16px;
width: 180%;
border: none;
color: #1f4d5e!important;
 border: 1px solid #1f4d5e!important;

}

.dropdown1 {
position: relative;
display: inline-block;
}

.dropdown-content1 {
display: none;
position: absolute;
background-color: #1F4D5E;
min-width: 160px;
Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}

.dropdown-content1 a {
font-color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content1 a:hover {
background-color: #1F4D5E;
color: #f90!important;
 transition: all .5s linear;
 border-color: #f90!important;
 }

.dropdown1:hover .dropdown-content1 {display: block;}

.dropdown1:hover .dropbtn1 {background-color: #99000;
color: #f90!important;
 transition: all .5s linear;
 border-color: #f90!important;
}
</style>

<div class="dropdown1">
<button id="dropbtn1">R&D and Production</button>
<div class="dropdown-content1">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
</div>
</div>

解决方法

<style type="text/css">

#applications_pharma_links1,#applications_pharma_links2,#applications_pharma_links3 {
    background-color: #154259;
    width: calc(100% - 1.563em);
    left: 0px;
    position: absolute;
    padding-top: 15px;
    padding-bottom: 15px;
    bottom: 50px;
    left: .7815em;
    font-weight: 500;
    z-index: 1000;
}
#applications_pharma_links1 a:hover,#applications_pharma_links2 a:hover,#applications_pharma_links3 a:hover {
    color: #f90;
    -webkit-transition: all .5s linear 0s;
    -o-transition: all .5s linear 0s;
    transition: all .5s linear 0s;
}
#applications_pharma_links1 a,#applications_pharma_links2 a,#applications_pharma_links3 a {
    color: #fff;
    line-height: 25px;
}
#applications_pharma_links1 a span,#applications_pharma_links2 a span,#applications_pharma_links3 a span {
    font-size: 1rem;
}
#buttoncontainer {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 768px) {
    #applications_pharma_links1,#applications_pharma_links3 {
        position: fixed;
        width: 70%;
        top: 0;
        left: 0;
        height: 100%;
        overflow-y: scroll;
    }
    #applications_pharma_links1 .large-12.medium-12.column,#applications_pharma_links2 .large-12.medium-12.column,#applications_pharma_links3 .large-12.medium-12.column {
        padding-top: .7815em;
        padding-bottom: .7815em;
        border-bottom: 1px solid #fff;    
    }
    
    #applications_pharma_links1 a:active,#applications_pharma_links2 a:active,#applications_pharma_links3 a:active {
        color: #f90;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
    .closing {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
    }
    .closingx {
        z-index: 998;
        top: 10px;
        right: 10px;
        position: absolute;
        font-size: x-large;
        color: #fff;
    }
    .closingx:active {
        color: #f90;
    }
}

</style>

<script>

const headerContentContainer = document.getElementsByClassName("module_container_2")[0];
const linklist1 = document.getElementById("applications_pharma_links1");
const linklist2 = document.getElementById("applications_pharma_links2");
const linklist2 = document.getElementById("applications_pharma_links3");

linklist1.classList.remove("row");
linklist2.classList.remove("row");
linklist3.classList.remove("row");
headerContentContainer.getElementsByClassName("button btn")[0].parentElement.appendChild(linklist1);
headerContentContainer.getElementsByClassName("button btn")[1].parentElement.appendChild(linklist2);
headerContentContainer.getElementsByClassName("button btn")[2].parentElement.appendChild(linklist3);

headerContentContainer.getElementsByClassName("button btn")[0].parentElement.getElementsByTagName("a")[0].removeAttribute("href");
headerContentContainer.getElementsByClassName("button btn")[1].parentElement.getElementsByTagName("a")[0].removeAttribute("href");
headerContentContainer.getElementsByClassName("button btn")[2].parentElement.getElementsByTagName("a")[0].removeAttribute("href");
headerContentContainer.getElementsByClassName("button btn")[0].parentElement.getElementsByTagName("a")[0].classList.remove("anchor-op");
headerContentContainer.getElementsByClassName("button btn")[1].parentElement.getElementsByTagName("a")[0].classList.remove("anchor-op");
headerContentContainer.getElementsByClassName("button btn")[2].parentElement.getElementsByTagName("a")[0].classList.remove("anchor-op");

 
linklist1.style.display = "none";
linklist2.style.display = "none";

if (window.screen.width <= 768) {

    let buttoncontainer = document.createElement('div');
    buttoncontainer.setAttribute("id","buttoncontainer");
    document.getElementById("applications_pharma_intro_module_2_headline").appendChild(buttoncontainer);

    for(let i = 0; i < headerContentContainer.getElementsByClassName("button btn")[0].parentElement.length; i++) {
        headerContentContainer.getElementsByClassName("button btn")[0].parentElement[i].classList.remove("column");
    }

    document.querySelector("#m-slider").appendChild(linklist1);
    document.querySelector("#m-slider").appendChild(linklist2);
    document.querySelector("#m-slider").appendChild(linklist3);
    
    let closex1 = document.createElement('div');
    closex1.setAttribute("id","closex1");
    closex1.classList.add("closing");
    document.querySelector("#m-slider").appendChild(closex1);
    closex1.style.display = "none";
    let closex2 = document.createElement('div');
    closex2.setAttribute("id","closex2");
    closex2.classList.add("closing");
    document.querySelector("#m-slider").appendChild(closex2);
    closex2.style.display = "none";
    let closex3 = document.createElement('div');
    closex3.setAttribute("id","closex3");
    closex3.classList.add("closing");
    document.querySelector("#m-slider").appendChild(closex3);
    closex3.style.display = "none";

    let x1 = document.createElement("div");
    linklist1.appendChild(x1);
    x1.classList.add("fa","fa-times","closingx");
    x1.setAttribute("id","closeXid1");

    let x2 = document.createElement("div");
    linklist2.appendChild(x2);
    x2.classList.add("fa","closingx");
    x2.setAttribute("id","closeXid2");
    
    let x3 = document.createElement("div");
    linklist3.appendChild(x3);
    x3.classList.add("fa","closingx");
    x3.setAttribute("id","closeXid3");

    headerContentContainer.getElementsByClassName("button btn")[0].parentElement.getElementsByTagName("a")[0].onclick = showlistMobile1;
    headerContentContainer.getElementsByClassName("button btn")[1].parentElement.getElementsByTagName("a")[0].onclick = showlistMobile2;
    headerContentContainer.getElementsByClassName("button btn")[2].parentElement.getElementsByTagName("a")[0].onclick = showlistMobile3;

    document.getElementById("closex1").onclick = closelistMobile1;
    document.getElementById("closex2").onclick = closelistMobile2;
    document.getElementById("closex2").onclick = closelistMobile3;
    document.getElementById("closeXid1").onclick = closelistMobile1;
    document.getElementById("closeXid2").onclick = closelistMobile2;
    document.getElementById("closeXid2").onclick = closelistMobile3;

    function showlistMobile1() {
        if (linklist1.style.display === "none") {
            linklist1.style.display = "block";  
            document.getElementById("closex1").style.display = "block";
        } 
    }

    function showlistMobile2() {
        if (linklist2.style.display === "none") {
            linklist2.style.display = "block";  
            document.getElementById("closex2").style.display = "block";
        } 
    }

    function showlistMobile3() {
        if (linklist3.style.display === "none") {
            linklist3.style.display = "block";  
            document.getElementById("closex3").style.display = "block";
        } 
    }

    function closelistMobile1() {
        linklist1.style.display = "none";
        document.getElementById("closex1").style.display = "none";
    }

    function closelistMobile2() {
        linklist2.style.display = "none";
        document.getElementById("closex2").style.display = "none";
    }
  
    function closelistMobile3() {
        linklist3.style.display = "none";
        document.getElementById("closex3").style.display = "none";
    }
      
} else {

    headerContentContainer.getElementsByClassName("button btn")[0].parentElement.addEventListener("mouseover",showlist1);
    headerContentContainer.getElementsByClassName("button btn")[1].parentElement.addEventListener("mouseover",showlist2);
    headerContentContainer.getElementsByClassName("button btn")[2].parentElement.addEventListener("mouseover",showlist3);
    headerContentContainer.getElementsByClassName("button btn")[0].addEventListener("touchend",taplist1);
    headerContentContainer.getElementsByClassName("button btn")[1].addEventListener("touchend",taplist2);
    headerContentContainer.getElementsByClassName("button btn")[2].addEventListener("touchend",taplist3);
    headerContentContainer.getElementsByClassName("button btn")[0].parentElement.addEventListener("mouseout",closelist1);
    headerContentContainer.getElementsByClassName("button btn")[1].parentElement.addEventListener("mouseout",closelist2);
    headerContentContainer.getElementsByClassName("button btn")[2].parentElement.addEventListener("mouseout",closelist3);

    function showlist1() {
        if (linklist1.style.display === "none") {
            linklist1.style.display = "block";
            linklist2.style.display = "none";
            linklist3.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[0].addEventListener("click",scrolllist1);  
        } 
    }
    
    function showlist2() {
        if (linklist2.style.display === "none") {
            linklist2.style.display = "block";
            linklist1.style.display = "none";
            linklist3.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[1].addEventListener("click",scrolllist2);  
        } 
    }

    function showlist3() {
        if (linklist3.style.display === "none") {
            linklist3.style.display = "block";
            linklist1.style.display = "none";
            linklist2.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[2].addEventListener("click",scrolllist3);  
        } 
    }

    function taplist1() {
        if (linklist1.style.display === "none") {
            linklist1.style.display = "block";
            linklist2.style.display = "none";
            linklist3.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[0].addEventListener("touchend",scrolllist1);   
        } 
    }

    function taplist2() {
        if (linklist2.style.display === "none") {
            linklist2.style.display = "block";
            linklist1.style.display = "none";
            linklist3.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[1].addEventListener("touchend",scrolllist2);                  
        } 

    }
  
    function taplist3() {
        if (linklist3.style.display === "none") {
            linklist3.style.display = "block";
            linklist1.style.display = "none";
            linklist2.style.display = "none";
            headerContentContainer.getElementsByClassName("button btn")[2].addEventListener("touchend",scrolllist3);                  
        } 

    }
  
    function closelist1() {
        linklist1.style.display = "none";
        headerContentContainer.getElementsByClassName("button btn")[0].removeEventListener("touchend",scrolllist1);
        headerContentContainer.getElementsByClassName("button btn")[0].removeEventListener("click",scrolllist1);
    }
  
    function closelist2() {
        linklist2.style.display = "none";
        headerContentContainer.getElementsByClassName("button btn")[1].removeEventListener("touchend",scrolllist2);
        headerContentContainer.getElementsByClassName("button btn")[1].removeEventListener("click",scrolllist2);
    }


    function closelist3() {
        linklist3.style.display = "none";
        headerContentContainer.getElementsByClassName("button btn")[2].removeEventListener("touchend",scrolllist3);
        headerContentContainer.getElementsByClassName("button btn")[2].removeEventListener("click",scrolllist3);
    }
    
    

document.getElementById("applications_pharma_links_script").style.display = "none";

</script>

我有三个链接容器。当我悬停现有按钮时，链接容器应显示为下拉列表。按钮 1 用于链接 1，按钮 2 用于链接 2，按钮 3 用于链接 3