Combining two events in JQuey?

Question

Combining two events in JQuey?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Good day to the whole community. I am quite new in this web development, and when I was doing my page I presented a problem that I do not know how to solve. I am trying to make a drop-down menu that when the event mouse-enter of the element .menu-desplegable is shown the menu is displayed and on the contrary when the event mouse-leave of the same element is activated, the menu is hidden.

So far so good, but the problem is that I want to select the categories that will be in the future in the div blue below (menu). But as it is obvious when the mouse-leave event of the .menu-desplegable element is activated, this menu is hidden.

My question would be, how can I avoid hiding the menu below if I put the mouse on it, and hide it if I have the mouse outside the div menu or outside the%% element%.

This is the code I've been carrying so far, it just hides and shows the menu by removing or putting the mouse over the .menu-desplegable .

$(document).ready(function() {
  $(".menu-desplegable").on("mouseenter", function() {    
    $("aside div.contenedor-aside").toggle(500);
  });

  $(".menu-desplegable").on("mouseleave", function() {   
    $("aside div.contenedor-aside").toggle(500);
  });
});

I really have no idea how to start doing what I need, so I would really appreciate your help. Thanks.

javascript jquery

asked by U.C 12.07.2018 в 01:49

source

2 answers

1

Based on what you shared, you can add a validation to your menu, validating if the mouse enters the menu options and place a css('display','block') , you'll find an example:

('#miMenu').mouseenter(function(){
    $(this).css('display','block');

I hope it's your help.

answered by 12.07.2018 в 02:12

disable option in drop-down list Update ComboBox

score 1 · Accepted Answer

I do not know how you have the html but you could get what you want by making the drop-down menu the child of the element that activates it, if you do this the child element should be stuck to the parent, there can be no separation between them, here you have An example of this possible solution:

$(document).ready(function() {
  $(".menu-desplegable").on("mouseenter", function() {    
    $(".contenedor-aside").toggle(500);
  });

  $(".menu-desplegable").on("mouseleave", function() {   
    $(".contenedor-aside").toggle(500);
  });
});

.menu-desplegable {background:red;width:200px;height:50px;}
.contenedor-aside {background:blue;width:200px;height:250px;position:absolute;top:50px;display:none;}
ul li {color:white;font-size:24px;cursor:pointer;padding:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-desplegable">
  <div class="contenedor-aside">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>