Question

代码无效。菜单在悬停时不会下降。代码中应该出错的是什么？它只显示“行动”这个词。当我在它上面盘旋时，它没有任何显示。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="heart fa fa-heart" id="demo1" data-toggle="tooltip" data-placement="top" title="" data-original-title="test-1">ss</i>

＆＃13;

$("#hoverli").hover(
  function() {
    $('#actions_menu').finish().slideDown('fast');
  },
  function() {
    $('#actions_menu').finish().slideUp('fast');
  }
);

＆＃13;

.lbtn {
  display: inline-block;
  cursor: pointer;
  height: 20px;
  background-color: silver;
  background-repeat: repeat-x;
  border: 1px solid black;
  /* dark navy blue */
  text-decoration: none;
  font-size: 11pt;
  text-align: center;
  line-height: 20px;
  padding: 0px 10px 0px 10px;
}

.divMenuWrapper1 {
  height: 25px;
  width: 75px;
}

.file_menu {
  display: none;
  width: 250px;
  border: 1px solid #1c1c1c;
  background-color: white;
  position: relative;
  z-index: 100000;
}

.file_menu div {
  background-color: white;
  font-size: 10pt;
}

.file_menu div a {
  color: gray;
  text-decoration: none;
  padding: 3px;
  padding-left: 15px;
  display: block;
}

.file_menu div a:hover {
  padding: 3px;
  padding-left: 15px;
  text-decoration: underline;
  color: black;
}

＆＃13;

P.S。我尝试在Snippet和Fiddle中运行它，是的它正在工作但是当我在我的PC上运行时它绝对不起作用。我使用相同的代码。

Answer 1

这是您处于工作状态的代码。您需要确保在代码段之前导入了jQuery。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
      <div class="lbtn">
        Actions
      </div>
      <div id="actions_menu" class="file_menu">
        <div><a href="#file">File</a></div>
        <div><a href="#edit">Edit</a></div>
        <div><a href="#view">View</a></div>
        <hr />
        <div><a href="#insert">Insert</a></div>
        <div><a href="#modify">Modify</a></div>
        <div><a href="#control">Control</a></div>
        <div><a href="#debug">Debug</a></div>
        <div><a href="#window">Window</a></div>
      </div>
    </div>
  </div>
</body>
<style>
.lbtn {
  display: inline-block;
  cursor: pointer;
  height: 20px;
  background-color: silver;
  background-repeat: repeat-x;
  border: 1px solid black;
  /* dark navy blue */
  text-decoration: none;
  font-size: 11pt;
  text-align: center;
  line-height: 20px;
  padding: 0px 10px 0px 10px;
}

.divMenuWrapper1 {
  height: 25px;
  width: 75px;
}

.file_menu {
  display: none;
  width: 250px;
  border: 1px solid #1c1c1c;
  background-color: white;
  position: relative;
  z-index: 100000;
}

.file_menu div {
  background-color: white;
  font-size: 10pt;
}

.file_menu div a {
  color: gray;
  text-decoration: none;
  padding: 3px;
  padding-left: 15px;
  display: block;
}

.file_menu div a:hover {
  padding: 3px;
  padding-left: 15px;
  text-decoration: underline;
  color: black;
}
</style>
<script>
$(document).ready(function() {
  $("#hoverli").hover(
    function() {
        $('#actions_menu').finish().slideDown('fast');
    },
    function() {
        $('#actions_menu').finish().slideUp('fast');
    }
  );
});
</script>
</html>

悬停下拉列表无法在JavaScript中运行：它没有显示任何内容

1 个答案: