Question

我有菜单和子菜单，完全是作为div而不是ul li创建的。因此，在悬停菜单元素时，我需要定位一个特定的div并显示为子菜单。我通过将子菜单id作为数据目标传递来编写一个jquery事件，以将特定div作为子菜单显示。当我应用断点时，循环进入。但是无法将子菜单的初始属性（display：none）移除到（display：block）。 Here is the plunker link for more details。请让我知道我哪里出错了。

我理解这种div方法不对。但我必须根据现有的HTML进行开发

$("#mainDiv div").hover(function () {
    var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
    console.log(liID);
    var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
    console.log(subMenuId);
    jQuery('#' + menuliID).hover(function(){
        console.log("entered inside function");
        $('#' + subMenuId).css('display', 'block !important');
        console.log('"#' + subMenuId + '"');
    },
    function () {
        console.log("entered inside 2nd function")
        jQuery('#' + subMenuId).css('display', 'none');

    }
    );

}
);

Answer 1

请更改

$('#' + subMenuId).css('display', 'block !important');

进入

$('#' + subMenuId).show();

因为没有必要应用.css()，因为您可以使用.show()或.hide()

进行工作

请参阅我的工作代码段

＆＃13;

// Code goes here

$("#mainDiv > .menuli").hover(function () {
        var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
        console.log(menuliID);
        var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
        console.log(subMenuId);
         if($('#' + subMenuId).is(":visible")){
           $('#' + subMenuId).hide();
        }else{
             $('#' + subMenuId).show();
         } 
    }
    );

＆＃13;

/* Styles go here */
#mainDiv div{
  border:1px solid;
  width:30%;
}
.submenu{
  position:absolute;
  top:0;
  left:24%;
}
.submenu ul li{
  border:1px solid;
  list-style:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="mainDiv">
      <div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
      <div id="menu2"  class="menuli" data-target="submenu2">Menu2</div>
      <div id="menu3"  class="menuli" data-target="submenu3">Menu3</div>
    </div>
    <div id="submenu1" class="submenu" style="display:none;">
      <ul>
        <li>Subelement1</li>
        <li>Subelement2</li>
        <li>Subelement3</li>
      </ul>
    </div>
    <div id="submenu2" class="submenu" style="display:none;">
      <ul>
        <li>Subelement4</li>
        <li>Subelement2</li>
        <li>Subelement3</li>
      </ul>
    </div>
    <div id="submenu3" class="submenu" style="display:none;">
      <ul>
        <li>Subelement5</li>
        <li>Subelement2</li>
        <li>Subelement3</li>
      </ul>
    </div>
  </body>

</html>

＆＃13;

Answer 2

您可以将代码简化为以下内容。将鼠标悬停在主菜单上时，您只需toggle显示子菜单。

我已将hover事件附加到子菜单，以便鼠标悬停显示。

//Toggle display of submenu when hover on main menu
$("#mainDiv div").hover(function () {
     $('#' + $(this).attr('data-target')).toggle();
});

//Display submenu when hover on it
$(".submenu").hover(function(){
      $(this).show();
}, function(){
      $(this).hide();
})

.submenu {
    border: 1px solid transparent;
}
.menuli{
    padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv" style="display:inline-flex;padding-top:10px;">
	<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
	<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
	<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>

<div id="submenu1" class="submenu" style="display:none;">
	<ul>
		<li>Subelement1</li>
		<li>Subelement2</li>
		<li>Subelement3</li>
	</ul>
</div>

<div id="submenu2" class="submenu" style="display:none;">
	<ul>
		<li>Subelement4</li>
		<li>Subelement2</li>
		<li>Subelement3</li>
	</ul>
</div>

<div id="submenu3" class="submenu" style="display:none;">
	<ul>
		<li>Subelement5</li>
		<li>Subelement2</li>
		<li>Subelement3</li>
	</ul>
</div>

子菜单未在悬停时加载

2 个答案: