jquery:不显示特定的下拉菜单

Question

我的一些主菜单项有下拉菜单，有些则没有。我想设置哪些在悬停和点击时显示，哪些不显示。在下面的示例中，我想禁止显示第一个和第四个下拉菜单，因为它们只有一个元素。

<div id="main-menu">
  <ul>
    <li><a href="http://piirissaareturism.ee/avasta-piirissaar/">Avasta Piirissaar</a>
      <ul class="dropdown-menu">
        <li><a rel="bookmark" href="http://piirissaareturism.ee/avasta-piirissaar/welcome-to-your-site">Welcome to Your Site!</a></li>
       </ul>
     </li>
     <li><a href="http://piirissaareturism.ee/kasulik-info/">Kasulik info</a>
       <ul class="dropdown-menu">
         <li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/toitlustus">Toitlustus</a></li>
         <li><a rel="bookmark" href="http://piirissaareturism.ee/kasulik-info/majutus">Majutus</a></li>
       </ul>
     </li>
     <li><a href="http://piirissaareturism.ee/puhkajale/">Puhkajale</a></li>
     <li><a href="http://piirissaareturism.ee/meist/">Meist</a>
       <ul class="dropdown-menu">
         <li><a rel="bookmark" href="http://piirissaareturism.ee/meist/mtu-piirissaare-turism">MTÜ Piirissaare Turism</a></li>
       </ul>
     </li>
   </ul>
 </div>

我还使用 jquery 来执行以下操作:

首先:悬停时向下滑动下拉菜单

$('#main-menu ul li').hover(
  function () {
    $('ul', this).stop(true, true).delay(100).slideDown(300);
  },
  function () {
    $('ul', this).stop(true, true).slideUp(300);            
  });

第二:如果菜单项有下拉菜单 - 在点击时显示它并且不要转到元素的 url，否则转到该元素的 url。

$('#main-menu ul li:has(.dropdown-menu)').on('click', function (event) {
  if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});

我知道，我的描述很深奥，但是看看my jsfiddle更好地理解。

Answer 1

您可以使用 :nth-child() 过滤掉不需要的元素，

Fiddle

$('#main-menu ul li:not(:nth-child(1),:nth-child(4))').hover(
    ...

---

要使 :first,:last 正常工作，我必须修改选择器以仅获取直接后代。

$('#main-menu > ul > li:not(:first,:last)').hover(

Fiddle

---

$('#main-menu > ul > li:not(:first,:last)').hover(
  function() {
    $('ul', this).stop(true, true).delay(100).slideDown(300);
  },
  function() {
    $('ul', this).stop(true, true).slideUp(300);
  });

$('#main-menu > ul > li:not(:first,:last):has(.dropdown-menu)').on('click', function(event) {
  if ($(event.target).parents('ul.dropdown-menu').length > 0) {
    event.stopPropagation();
  } else {
    event.preventDefault();
  }
  $(this).find('ul').slideToggle();
});