Untermenü nicht laden bei Hover

Ich habe Menü und Untermenü, das vollständig als divs anstelle von ul li erstellt wurde. Wenn ich also das Menüelement schwebe, muss ich ein bestimmtes div als Ziel auswählen und als Untermenü anzeigen. Ich habe ein jquery-Ereignis geschrieben, indem ich die submenu-ID als Datenziel übergeben habe, um das spezifische div anzusteuern, das als Untermenü angezeigt werden soll. Wenn ich Breakpoints anwende, geht die Schleife nach innen, kann aber die ursprüngliche Eigenschaft des Untermenüs (Anzeige: keine) bis (Anzeige: Block) nicht entfernen. Here is the plunker link for more details. Bitte lassen Sie mich wissen, wo ich falsch liege.Untermenü nicht laden bei Hover

Ich verstehe, dass Div-Ansatz nicht richtig ist. Aber ich habe die Entwicklung nach dem bestehenden 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'); 

    } 
    ); 

} 
);

Quelle

2017-10-05 shabarinath

bitte

ändern

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

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

da es nicht notwendig ist .css() anzuwenden, wie Sie Ihre Arbeit mit .show() tun können, oder .hide()

und bitte sehen Sie meine Arbeit g 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="[email protected]*" 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>

Quelle

2017-10-05 07:30:56 Pritamkumar

Wow. Das hilft. Sobald sich der Cursor bereits in div-Elementen befindet, müssen Sie den Mauszeiger nicht mehr aktivieren. Warum habe ich nicht daran gedacht :). – shabarinath

bitte kreuzen Sie meine Antwort an, wenn meine Antwort Ihr Problem löst @ shabarinath – Pritamkumar

Sie Ihren Code auf die folgenden vereinfachen kann. Sie müssen nur toggle die Anzeige der Untermenüs, wenn Sie den Mauszeiger über das Hauptmenü bewegen.

Ich habe hover Ereignis an das Untermenü angeschlossen, so dass es auf der Maus angezeigt wird.

//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;"> 
 
\t <div id="menu1" class="menuli" data-target="submenu1">Menu1</div> 
 
\t <div id="menu2" class="menuli" data-target="submenu2">Menu2</div> 
 
\t <div id="menu3" class="menuli" data-target="submenu3">Menu3</div> 
 
</div> 
 

 
<div id="submenu1" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement1</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div> 
 

 
<div id="submenu2" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement4</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div> 
 

 
<div id="submenu3" class="submenu" style="display:none;"> 
 
\t <ul> 
 
\t \t <li>Subelement5</li> 
 
\t \t <li>Subelement2</li> 
 
\t \t <li>Subelement3</li> 
 
\t </ul> 
 
</div>

Quelle

2017-10-05 07:35:17

Vielen Dank. Ihre Idee half dabei, das Untermenü über den Mauszeiger zu halten. – shabarinath

Untermenü nicht laden bei Hover

Antwort

Verwandte Themen