菜单展开和折叠

Question

我希望能够扩大和对我公司的网站崩溃马努导航，比如当有人使用移动设备来访问我的网站，如果点击导航图标将会打开我公司网站的前在那里你会看到相同的Manu Nav，这是隐藏的，除非在移动设备上单击导航图标并且Manu Nav出现时，它可以正常工作。

但有人点击li标签，它扩展了li标签中包含的li标签，其中包含li标签中的ul标签，就像我拥有域并且在它下面有单域注册表，批量域注册表，转移域，新TLD一样桌面设备时，你将鼠标悬停在它上面显示这包含和在移动设备上，当你点击Manu Nav图标时，它会打开Domains，Hosting等。

所以我想要做的是当有人点击Domains时，包含，如果点击托管它的幻灯片上的域包含并滑落托管包含。

这里是我到目前为止有：

$(document).ready(function() { 
 
    $(".parents-toggle > li a").click(function() { 
 
     $(".parents-toggle > div.menu-toggle").not($(this).siblings()).slideUp(); 
 
     $(this).siblings(".menu-toggle").slideToggle(); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<div class="parents-toggle"> 
 
    <li> 
 
     <a href="#" id="domain-toggle">Domains</a> 
 
     <div class="menu-toggle hidden" id="domain-menu"> 
 
      <div class="menu-toggle-one"> 
 
       <ul> 
 
        <li><a href="http://www.domain.com/domain">Simple Domain Search</a></li> 
 
       <li><a href="http://www.domain.com/index.php?m=newtlds">New TLDs</a></li> 
 
       <li><a href="http://www.domain.com/domainchecker.php?search=bulkregister">Bulk Domain Search</a></li> 
 
       <li><a href="http://www.domain.com/domainchecker.php?search=bulktransfer">Bulk Domain Transfer</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</div> 
 
<div class="parents-toggle"> 
 
    <li> 
 
     <a href="#" id="domain-toggle">Hosting</a> 
 
     <div class="menu-toggle hidden" id="domain-menu"> 
 
      <div class="menu-toggle-one"> 
 
       <ul> 
 
        <li><a href="Hosting/Shared">Shared Hosting</a></li> 
 
        <li><a href="Hosting/VPS">VPS Servers</a></li> 
 
        <li><a href="Hosting/Reseller">Reseller Hosting</a></li> 
 
        <li><a href="Hosting/Dedicated">Dedicated Servers</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </li> 
 
</div>

但当点击什么也不显示有人可以请让我知道什么可能是缺什么问题，我需要什么添加使其工作 我的公司网站可以在这里找到：https://www.domain.com如果我的问题很混乱让我知道。

谢谢

Answer 1

将您的JS更改为以下，如果第二次打开，它将关闭第一个下拉列表。

$(document).ready(function() { 
    $(".parents-toggle > li a").click(function() { 
     //$(".parents-toggle > div.menu-toggle").not($(this).siblings()).slideUp(); 
     $(".parents-toggle").siblings().find('.menu-toggle').slideUp(); 
     $(this).siblings(".menu-toggle").slideToggle(); 
    }); 
}); 

HTML

<div class="parents-toggle"> 
    <li><a href="#" id="domain-toggle">Domains</a> 
     <div class="menu-toggle hidden" id="domain-menu"> 
      <div class="menu-toggle-one"> 
       <ul> 
        <li><a href="http://www.domain.com/domainchecker.php">Simple Domain Search</a></li> 
        <li><a href="http://www.domain.com/index.php?m=newtlds">New TLDs</a></li> 
        <li><a href="http://www.domain.com/domainchecker.php?search=bulkregister">Bulk Domain Search</a></li> 
        <li><a href="http://www.domain.com/domainchecker.php?search=bulktransfer">Bulk Domain Transfer</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
</div> 

<div class="parents-toggle"> 
    <li><a href="#" id="domain-toggle">Hosting</a> 
     <div class="menu-toggle hidden" id="domain-menu"> 
      <div class="menu-toggle-one"> 
       <ul> 
        <li><a href="Hosting/Shared">Shared Hosting</a></li> 
        <li><a href="Hosting/VPS">VPS Servers</a></li> 
        <li><a href="Hosting/Reseller">Reseller Hosting</a></li> 
        <li><a href="Hosting/Dedicated">Dedicated Servers</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
</div> 

CSS

.hidden { 
    display: none; 
} 

Fiddle

Answer 2

你不应该有2个元素具有相同的ID如。 id="domain-menu"，这是类的用途。

$(document).ready(function() { 
    $(".menu-toggle").hide(); 
    $(".parents-toggle > li a").click(function() { 
     $(this).parents('.parents-toggle').siblings().find('.menu-toggle').slideUp(); 
     $(this).siblings(".menu-toggle").slideToggle(); 
    }); 
}); 

会做你没有任何副作用，如无法关闭菜单。

注：例如还隐藏在加载菜单切换，而不是使用自定义隐藏类+ CSS

编辑：jsFiddle