显示/隐藏＆鼠标悬停Javascript

我一直在研究显示/隐藏javascript，并用鼠标悬停效果进一步推动，以实现我想要的效果。为了更好的可访问性，我设置了一个小提琴。但是，现在我想通过最多4个不同的文本区域来推送它（“点击此处获取更多信息”），并且每个文本区域都会有更多悬停文本，因为我试图在HTML代码本身中显示。我现在使用和编辑的JavaScript具有对应于“0”和“1”的“ID”，它不适用于我当前的HTML代码，因为它具有诸如“uu3308-10”（用Adobe Muse制作）等时髦名称。 现在，我想知道我需要在Javascript中更改哪些变量才能使其功能正常并且有没有办法编译此代码，以便至少可以与另外11个“单击此处以获取更多信息”点一起使用？显示/隐藏＆鼠标悬停Javascript

注意：当前的javascript使showMoreText2出现在两个showMoreText区域下面（希望一次只显示一个悬停文本）。

点击这里FIDDLE - >http://jsfiddle.net/TPLOR/vy6nS/

谢谢，我希望这是足够的帮助。 =）

来源

2012-07-12 user1521577

你能澄清你正在努力实现的结果呢？小提琴很好，但在问题本身中查看代码/期望输出是有帮助的，以最大限度地提高人们帮助的机会。 – Utkanos 2012-07-12 17:54:37

1）你点击“点击这里查看更多信息”，然后“弹出，你会发现更多的信息”，当你将鼠标悬停在“这里，你会发现更多的信息”时，你会得到更多的div更多信息。所以它的显示/隐藏效果，添加了鼠标悬停以获取更多信息 - 基本上提供了3种不同级别的信息。第二级也有4个不同的文本区域。 – user1521577 2012-07-12 17:55:38

请注意您的鼠标移动想法如何转化为移动用户。 – 2016-08-09 16:50:48

有点hackish的：（见http://jsfiddle.net/vy6nS/30/）

window.onload = function() { 
    var elems1 = document.getElementsByClassName("expander"); 
    for (i = 0; i < elems1.length; i++) { 
     elems2 = elems1[i].childNodes; 
     for (x = 0; x < elems2.length; x++) { 
      if (elems2[x].className == "toggle") elems2[x].onclick = function() { 
       showMore(0, this); 
      }; 
      else if (elems2[x].className == "showMoreText") { 
       elems2[x].onmouseover = function() { 
        showChilds("block", this); 
       }; 
       elems2[x].onmouseout = function() { 
        showChilds("none", this); 
       }; 
      } 
     } 
    } 
}; 

function get_nextsibling(n) { 
    x = n.nextSibling; 
    while (x.nodeType != 1) { 
     x = x.nextSibling; 
    } 
    return x; 
} 

function showChilds(disp, elem) { 
    get_nextsibling(elem).style.display = disp; 
} 

function showMore(disp, elem) { 
    var children = elem.parentNode.childNodes; 
    for (i = 0; i < children.length; i++) { 
     if (disp == 0 && children[i].className == "showMoreText") { 
      children[i].style.display = children[i].style.display == "none" ? "block" : "none"; 
     } 
    } 

}

来源

2012-07-12 18:08:08 worenga

感谢mightyuhu，我会添加什么变量，所以我可以再添加两个点，比如“3在这里，你会发现更多的信息”和“4在这里，你会发现更多的信息”和他们各自的鼠标悬停文本？ – user1521577 2012-07-12 18:20:01

只是调整你的HTML ... http://jsfiddle.net/vy6nS/55/ – worenga 2012-07-12 19:51:50

显示/隐藏＆鼠标悬停Javascript

回答

相关问题