问题描述:

I have the following code in jquery to display items for a sub menu:

$(document).ready(function(){

$(".menu > .menu-item").mouseenter(function(){

if($(this).has(".sub-menu").length){

$(".sub-menu",this).fadeIn(500);

$(".sub-menu",this).css("margin","0 40px");

$(".sub-menu",this).css("position","fixed");

$(".sub-menu",this).css("z-index","10");

}

})

.mouseleave(function(){

if($(this).has(".sub-menu").length){

$(".sub-menu",this).fadeOut(500);

}

});

});

It works fine when the sub menu element doesn't have other sub elements, but when I add a sub element both are displayed at the same time.

I want to display only the sub elements and if any sub element has more sub elements inside of it, display them as well only when the mouse is over the main sub element.

This is the code generated automatically when I add sub elements to the menu:

<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">

<a href="http://localhost:8080/testoir/sample-page/">Audiologia</a>

<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">

<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a>

<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">

<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a></li>

</ul>

</li>

</ul>

</li>

How can I do this?

Thank you very much for your time and help.

网友答案:

$(".sub-menu", this) will match sub-menus at any depth. If you just want the immediate children, use $(this).children(".sub-menu").

$(document).ready(function() {
  $(".menu > .menu-item").mouseenter(function() {
      if ($(this).children(".sub-menu").length) {
        $(this).children(".sub-menu")
          .fadeIn(500)
          .css({
            "margin": "0 40px",
            "position": "fixed",
            "z-index": "10"
          });
      }
    })
    .mouseleave(function() {
      if ($(this).children(".sub-menu").length) {
        $(this).children(".sub-menu").fadeOut(500);
      }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
    <a href="http://localhost:8080/testoir/sample-page/">Audiologia</a>
    <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
      <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17"><a href="#">option1</a>
        <ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
          <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">option2</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
网友答案:

To get a array of elements with the same classname in pure Javascript:

var elements = document.getElementsByClassName('className');

To get the first element with the specified classname above:

var element = elements[0];

If you wanted to get the second element it would be:

var element = elements[1];
相关阅读:
Top