菜單展開和摺疊

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