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);            
  });

第二：如果菜单项有下拉菜单 - 在点击时显示，不要转到项目的网址，否则转到该项目的网址。

$('#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();
});

Answer 2

请参阅https://stackoverflow.com/a/12198561/3671484以获得一个很好的答案。它允许您检查父母中特定数量的孩子

例如，它检查父项中的子元素：

/* two items */
  li:first-child:nth-last-child(2),
  li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}

这会检查第一个孩子（li:first-child）是最后一个孩子（:nth-last-child(2))之前的两个兄弟元素，并且还会将此项目的宽度与其所有兄弟姐妹一起设置为50％（~ li）

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

2 个答案: