自动隐藏菜单答案

【问题标题】：Automatic hiding menu自动隐藏菜单
【发布时间】：2016-09-04 17:18:32
【问题描述】：

另一个编辑：

这是完整的代码，作为小提琴 (http://jsfiddle.net/pbb9cc9f/7/)，菜单正在工作，但我无法将其实现到我的 HTML 文件中。我做错什么了？预加载的 javascript 链接是否错误？循环幻灯片是否与菜单混淆？谢谢！

<!DOCTYPE html>
<html>

<title>CHRIS RHODES</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$('#slide').cycle({ 
    fx:     'none', 
    timeout:  0, 
    next:   '#nex',
    prev: '#pre' 
});

$(document.documentElement).keyup(function (e) {
    if (e.keyCode == 39)
    {        
       $('#slide').cycle('next');
    }

    if (e.keyCode == 37)
    {
        $('#slide').cycle('prev');
    }

});
</script>

<script type="text/javascript">
(function() {

  var time = 3000,
    timer;

  clearTimeout(timer);
  $('.target').stop(true).css('opacity', 1).show().fadeOut(8000);

  function handlerIn() {
    clearTimeout(timer);
    $('.target').stop(true).css('opacity', 1).show();
  }

  function handlerOut() {
    timer = setTimeout(function() {
      $('.target').fadeOut(8000);
    }, time);
  }

  $(".link, .target").hover(handlerIn, handlerOut);

}());
</script>

<head>

<style type="text/css">

body {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 8pt;
  letter-spacing: 0.1em;
}

a {
  font-family: Arial;
  text-decoration: none;
  color: black;
  font-size: 8pt;
  letter-spacing: 0.1em;
}

.target {
  display: none;
  left: 20px;
  top: 20px;
  width: 98px;
  height: 60px;
  position: absolute;
  z-index: 99999;
  background: red;
}

.link {
  left: 0px;
  top: 0px;
  width: 138px;
  height: 100px;
  position: absolute;
  z-index: 9999;
  background: blue;
}

#slide {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#pre {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-color: transparent;
  cursor: w-resize;
  z-index: 999;
}

#nex {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 50%;
  height: 100%;
  background-color: transparent;
  cursor: e-resize;
  z-index: 999;
}

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Resizable {
  max-width: 80%;
  max-height: 90%;
  resize: both;
  overflow: auto;
}

</style>

</head>

<div class="link"></div>

<div class="target">
CHRIS RHODES<br><br>
<a href="http://www.chrisjrhodes.co.uk">Comissions</a><br>
<a href="http://www.chrisjrhodes.co.uk/editorial">Editorial</a><br>
<a href="http://www.chrisjrhodes.co.uk/contact">Contact</a><br>
</div>

<div id="pre"></div>
<div id="nex"></div>

<ul id="slide">
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/01-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/02-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/03-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/04-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/05-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/06-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/07-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/08-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/09-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/10-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/11-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/12-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/13-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/14-800x800.jpg" class="Absolute-Center is-Resizable"/>
<img src="http://chrisjrhodes.co.uk/wp-content/uploads/2016/03/15-800x800.jpg" class="Absolute-Center is-Resizable"/>
</ul>

</body>
</html>

【问题讨论】：

你不能这样做。你的权利，你不能悬停一个不存在的元素。您需要某种始终在页面上的元素。另外，用户如何在没有任何视觉线索的情况下知道悬停在哪里？
菜单应该在访问页面时可见，然后“变为不可见”。当人们想要使用它时，可以将鼠标悬停在它上面。
所以你希望它是透明的？所以不是消失而是成为“透视”？鉴于您现在发布的附加代码究竟是什么问题？
javascript 可以在小提琴上运行，但不能在我的代码上运行，我做错了什么？

标签： javascript jquery show-hide mouseover fadeout

【解决方案1】：

在这种情况下，您需要另一个可见元素作为悬停源。它可以是其他可见的东西，或者只是您在 UI 上留下的几个像素宽的线条，或者您可以为此创建的一些特殊元素/图标。这也应该适用于桌面或移动设备。

【讨论】：

我不认为其他元素会这样做，我将不得不从代码重新开始，因此菜单是不可见的。非常简单，三个链接在简单的 html 中，我不介意它们只是透明的，只要它们留下来，只要我将鼠标悬停在它们上面就会回来。

【解决方案2】：

尝试更改visibility

<script type="text/javascript">
  setTimeout(function() {
    $('.menu').css("visibility", "hidden");
  }, 5000);
</script>

visibility: hidden 只会隐藏你的视野中的元素。但它会在那里。不像display: none;

【讨论】：

谢谢，但这似乎不起作用，据我所知，它仍然消失了。

【解决方案3】：

这是我的 js 代码，它执行您正在描述的内容。如果您喜欢 css 和 html 部分，请告诉我，您可以随意使用它并设置自己的样式。

function expand(s){
   var td = s;
   var d = td.getElementsByTagName("div").item(0);
   td.classname = "menuHover";
   d.className = "menuHover";
}

function collapse(s){
   var td = s;
   var d = td.getElementsByTagName("div").item(0);
   td.className = "menuNormal";
   d.className = "menuNormal";
}

【讨论】：

这并不能解决如果菜单不可见如何触发事件的问题。我认为这才是真正的问题。