J'essaie de garder mon sous-menu apparaissant lorsque je passe la souris dessus. Actuellement, il disparaît lorsque je survole Locations.

Ma démo: http://jsfiddle.net/269yqavo/

Voici mon code:

$('.main a.primary').hover(function(e){
	e.preventDefault();
	$(this).next().toggle();
}).hover();
.sub-menu {display:none;background:#ccc}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="sf-menu">
    <li class="main">
      <a href="" class="primary">Locations</a>

      <ul class="sub-menu">
        <li><a href="/location/athina/" title=
        "View all posts in Athina">Athina</a></li>

        <li><a href="/location/beirut/" title=
        "View all posts in Beirut">Beirut</a></li>

      </ul>
    </li>
  </ul>
2
michaelmcgurk 16 juil. 2015 à 13:24

3 réponses

Meilleure réponse

Voici une solution sans JS du tout. Affichez simplement le sous-menu chaque fois que le conteneur est survolé.

http://jsfiddle.net/269yqavo/1/

.sub-menu {
    display:none;
    background:#ccc
}

.main:hover .sub-menu {
    display: block;
}
4
Itay 16 juil. 2015 à 10:26

Pourquoi le faites-vous par simple CSS?

HTML

<ul class="sf-menu">
    <li class="main">
      <a href="" class="primary">Locations</a>

      <ul class="sub-menu">
        <li><a href="/location/athina/" title=
        "View all posts in Athina">Athina</a></li>

        <li><a href="/location/beirut/" title=
        "View all posts in Beirut">Beirut</a></li>

      </ul>
    </li>
  </ul>

CSS

.sub-menu {display:none;background:#ccc}

.main:hover .sub-menu{
    display:block
}

La logique simple ici lorsque vous survolez le sous-menu de la classe principale s'affiche

JSFIDDLE 1

OU

$('.sf-menu').children().hover(function(e){
    $(this).find("a").next().show();
}, function () {
    $(this).find("a").next().hide();
});

JSFIDDLE 2

0
Prashant Tapase 16 juil. 2015 à 11:39

Pourquoi ne pas faire ça? La fonction de survol doit être utilisée différemment. L'événement doit être lié au parent.

$('.main a.primary').parent().hover(function(e){
	$(this).find("a").next().show();
}, function () {
	$(this).find("a").next().hide();
});
.sub-menu {display: none; background: #ccc}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="sf-menu">
  <li class="main">
    <a href="" class="primary">Locations</a>
    <ul class="sub-menu">
      <li><a href="/location/athina/" title=
             "View all posts in Athina">Athina</a></li>
      <li><a href="/location/beirut/" title=
             "View all posts in Beirut">Beirut</a></li>
    </ul>
  </li>
</ul>

Et au lieu d'utiliser JS, vous pouvez utiliser CSS seul:

.sub-menu {
  display: none;
  background: #ccc
}
.main:hover .sub-menu {
  display: block;
}
<ul class="sf-menu">
  <li class="main">
    <a href="" class="primary">Locations</a>
    <ul class="sub-menu">
      <li><a href="/location/athina/" title=
             "View all posts in Athina">Athina</a></li>
      <li><a href="/location/beirut/" title=
             "View all posts in Beirut">Beirut</a></li>
    </ul>
  </li>
</ul>
2
Praveen Kumar Purushothaman 16 juil. 2015 à 10:27