Question

我正试图在我的网站上制作菜单。我的想法是在网络的左侧，菜单将出现。菜单将包含X <li>并且每个<li>都有X图标，当我的鼠标结束时，我希望每个<li> +图标显示X数据ID。

例如：

<ul><li data-id="My Profile">ICON</li></ul>

鼠标悬停：

<ul><li>ICON + My Profile</li></ul>

我在这里有一个不起作用的例子：http://jsfiddle.net/pqa84nec/1/

这是我试图使用的JS：

＆＃13;

$("#menu").each(function() {
	$(this).find('li').each(function(){
	var oldData = $(this).html();
	var data = $(this).attr("data-id");
	var that = this;
        $(this).mouseover(function() {
			setTimeout(function() {
            $(that).html(oldData+data);
			}, 100);
        });
        $(this).mouseout(function () {
             $(this).html(oldData);
        });
	});
    });

＆＃13;

你能给我一些帮助吗？

Pd积

正如我所看到的，这段代码被窃听：

谢谢！

Answer 1

试试这个：

使用Javascript：

$(function() {
  $("#menu ul li").each(function() {
    var _this = $(this);
    var icon = _this.html()
    $(this).hover(function(e) {
      setTimeout(function() {
        _this.html(icon + _this.data('id'));
      }, 200);
    }, function(e) {
      setTimeout(function() {
        _this.html(icon);
      }, 200);
    })
  });
});

CSS添加：

#menu>ul>a {
  overflow: hidden;
}

https://jsfiddle.net/mh4hcuw4/

Answer 2

您的脚本中有很多错误试试这个：

$(document).ready(function() {
  $("#menu a li").each(function() {

    var oldData = $(this).html();
    var data = $(this).attr("data-id");

    $(this).mouseover(function() {
      setTimeout(function() {
        console.log(oldData + data);
        $(this).html(oldData + data)
      }, 100);
    });
    $(this).mouseout(function() {
      console.log(oldData);
      $(this).html(oldData)
    });

  });
})

Answer 3

如果你不介意CSS解决方案，这里有一些基于你拥有的东西。这样您就不必依赖JavaScript来运行菜单。它没什么特别的，你可以做很多让它变得更好，但它应该让你开始。在小提琴中，我加载了Font Awesome库以使用图标。

HTML：

<div id="menu">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-user"></i>
                <span>My Profile</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-power-off"></i>
                <span>Log Out</span>
            </a>
        </li>
    </ul>
</div>

CSS：

*{margin:0;padding:0;}
html,body {
    background-color: #263238;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}
li {
  position: relative;
}
a {
  text-decoration: none;
}
#menu {
  background-color: #37474f;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 50px;
}
#menu ul {
  list-style: none;
}
#menu > ul > li {
  border-bottom: 1px solid #263238;
}
#menu > ul > li > a {
  color: #263238;
  display: block;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease 0s;
  width: 50px;
}
#menu > ul > li > a i {
  display: block;
  height: inherit;
  line-height: inherit;
  text-align: center;
  width: 50px;
}
#menu > ul > li > a span {
  color: #fff;
  font-size: 16px;
  left: 50px;
  max-width: 130px;
  opacity: 0;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transition: opacity 0.3s ease .2s;
  visibility: hidden;
  white-space: nowrap;
}
#menu > ul > li > a:hover {
  background-color: #fbd75b;
  color: #fff;
  width: 200px;
}
#menu > ul > li > a:hover span {
  opacity: 1;
  visibility: visible;
}

一个小提琴：jsfiddle.net/LjLvwb8q/3/

Jquery在mouseover上显示每个li的不同data-id

3 个答案: