CODEWITHSUNDEEP
javascriptjquery
shabarinath
shabarinath

Reputation: 603

submenu not loading on hover

I have menu and submenu which was created totally as divs instead of ul li. So, on hovering the menu element, I need to target a particular div and show as submenu. I have written a jquery event by passing submenu id as data-target to target the specific div to show as submenu. When I apply break points, the loop is going inside., but unable to remove initial property of submenu (display:none) to (display:block). Here is the plunker link for more details. please let me know where i`m going wrong.

I understand this div approach is not right one. But I have to develop according to existing 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');

    }
    );

}
);

Upvotes: 1

Views: 282

Answers (2)

Phani Kumar M
Phani Kumar M

Reputation: 4590

You can simplify your code to the following. You just need to toggle the display of the sub menus when hover over main menu.

I have attached hover event to submenu so that it is displayed on mouse over.

//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>

Upvotes: 1

Pritamkumar
Pritamkumar

Reputation: 686

please change 

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

into 

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

as it is not necessary to apply .css() as you can do your work with .show() or .hide()

and please see my working snippet 

// 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();
         } 
    }
    );
/* 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;
}
<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>

Upvotes: 1

Related Questions