Question

我已经创建了这个小切换，因为我开始使用javascript，但它并没有像我想的那样工作。棕色框应该在悬停和点击时出现并消失（对于ipad而言）。

现在它可以悬停，但不是点击ipad，它只出现一次，就是这样。

我认为它也与我的分享图标混淆。

感谢任何帮助。

function toggleDisplay (toBlock, toNone) {
    document.getElementById(toBlock).style.display = 'block';
    document.getElementById(toNone).style.display = 'none';
}

#toggle_hero
{
	float:left;
}
.leftHalf
{
    display: block;
    height: 100%;
    width: 50%;
    float: left;
    position: absolute;
    z-index: 2;
}
.leftHalf div
{
    display:none;
}
.leftHalf:hover
{
}

.leftHalf:hover div
{
    display:block;
    width: 100%;
    height: 23%;
    overflow: auto;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 70px;
    right: 0;
    background: white;
    color: #fff;
    background-color:rgba(207,167,80,0.7);
    padding:10px;
    font-size: 0.8em;
    font-weight: 200;
}

.leftHalf:hover div h3
{
    font-weight: 500;
    float:left;
}
.leftHalf:hover div span{
    float:right;
    text-align: center;
    padding-bottom:5px;
    color:black;
}

hover (on a pc) or click me (on ipad)    
<div id="toggle_hero" onclick="toggleDisplay('comment', 'toggle_hero')">
        <div class="leftHalf clearfix" id="comment">
           <div>
               <span>
                <a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>&nbsp;
                   

                <a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
              </span>
              <h3>this text should appear both on hover and click (for ipad)</h3> 
              
            </div>
        </div>
    </div>

Answer 1

您可以创建一个事件侦听器来捕获var。

中的当前切换状态

var toggle = false;

var myDiv = document.getElementById('myDiv');

myDiv.addEventListener('click', function() {
    if (toggle === false) {
        this.getElementsByTagName('p')[0].style.display = 'none';
        toggle = true;
    } else {
        this.getElementsByTagName('p')[0].style.display = 'initial';
        toggle = false;
    }
});

http://jsfiddle.net/scott88/bLkdt6mc/

您可以为鼠标悬停＆＃39;添加另一个监听器。

Answer 2

您的HTML结构有点奇怪。要悬停/单击的文本实际上位于单击事件的目标区域之外。由于绝对定位，它恰好在我本地工作，但如果iPad浏览器的行为不同，我也不会感到惊讶。

我建议为要点击/悬停的内容定义一个明确的目标，在点击/悬停时应用一个类，并在CSS中处理其余的。我把我想象的样本放在一起。您可以删除mouseenter和mouseleave事件，以在计算机上模拟触摸事件的工作方式。我不确定你想要它的表现，但希望这足以让你开始。

function setHover(isHover) {
	var element = document.getElementById("toggle_hero");
	if (isHover)
		element.className = "hovered";
	else
		element.className = "";
}

function toggleHover() {
	var element = document.getElementById("toggle_hero");
	setHover(element.className === "");
}

#toggle_hero {
	float:left;
}

#comment {
	display:none;
	width: 100%;
	height: 23%;
	overflow: auto;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	background: white;
	color: #fff;
	background-color:rgba(207,167,80,0.7);
	padding:10px;
	font-size: 0.8em;
	font-weight: 200;
}

.hovered #comment {
	display: block;
}

<div id="toggle_hero" onclick="toggleHover()" onmouseenter="setHover(true);" onmouseleave="setHover(false);">
	hover (on a pc) or click me (on ipad)  
	<div id="comment">
		<div>
		   <span>
			<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>&nbsp;
			<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
		  </span>
		  <h3>this text should appear both on hover and click (for ipad)</h3> 
		</div>
	</div>
</div>

在悬停时切换并单击无法正常工作

2 个答案: