How to aim at the next <ul> list item in an <ul> with jquery?

StackOverflow https://stackoverflow.com/questions/18248078

  •  24-06-2022
  •  | 
  •  

Question

I want to dynamically show the next <ul> list item on a mouseenter over the first <li> item. The first part of the script works as expected, the animation of the next list item in the first list. However I have no function on showing the next <ul>. Any tips would be of great help.

You can see the so far working script here: http://liebdich.biz/test/test.php.

Here is the code

<head>
<style>
.masteringtext {
height:262px;
width:355px;
background:grey; 
overflow:hidden;
position:relative;
}

.masteringtext ul {
list-style:none;
padding:0;
margin:0;
cursor:pointer;
}

.masteringtext ul li {
display:inline-block;
background:#c3c3c3;
border:solid 1px black;
border-radius:5px;
padding:1px;
}

.overlay {
margin-left:-30px;
}

.profile {
position:absolute;
top:20px;
left:0;
top:25px;
display:none;
}
</style>

</head>

<body>
<div class="masteringtext">
<ul>
<li>Equipment</li>
    <li class="overlay">Kosten</li>
    <li class="overlay">Referenzen
        <ul class="profile">
            <li>Dies ist ein Test<br> um darzustellen was schon lange nötig war</li>
        </ul>
    </li>
    <li class="overlay">Ablauf einer Bestellung</li>
    <li class="overlay">Tips für Mixe</li>
    <li class="overlay">Faq</li>
</ul>


</body>

<script>
jQuery(document).ready(function(){
var overlay = $('li');


overlay.mouseenter(function() {
    $(this).next().animate({'margin-left':0},400, function() {
        $(this).next('ul').show();
    });
});

overlay.mouseleave(function() {
    $(this).next().animate({'margin-left':-30});
    });

});
</script>
Was it helpful?

Solution

I think what you are trying to do is to move the next li to further right and then show the ul which is inside the current li

overlay.mouseenter(function() {
    var $li = $(this);
    $li.next().stop(true, true).animate({'margin-left':0},400, function() {
        $li.find('ul').show();
    });
});

overlay.mouseleave(function() {
    var $li = $(this);
    $li.next().stop(true, true).animate({'margin-left':-30}, function() {
        $li.find('ul').hide();
    });
});

Demo: Fiddle

OTHER TIPS

The <ul> in question is not a sibling, but rather a child of the <li>

Replacing

$(this).next('ul').show();

with

$(this).find('ul').show();

should do it.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top