菜單展開和折疊

Question

我希望能夠在公司網站上展開和折疊Manu Nav，例如當有人使用移動設備訪問我的網站時，如果單擊Nav Icon，它將在我公司網站的前面打開，您將在其中看到相同的Manu除非在移動設備上單擊“導航圖標”並且出現“手動導航”，否則隱藏的導航會正常工作。

但是有人單擊li標記會擴展li標記內的ul標記的li標記的內容，例如當我擁有域時，在它之下我擁有單個域注冊，批量域注冊，轉移域，桌面設備中的新TLD將鼠標懸停在它上面會顯示其中包含的內容，並在移動設備中單擊Manu Nav Icon時會打開域，托管等。

因此，我想做的是，當某人單擊“域”時，它會向下滑動其包含的內容；如果單擊“托管”，其幻燈片會向上移至“域”包含的內容，並向下滑動該主機的包含內容。

這是我到目前為止所擁有的：

 $(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

您不應有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

Answer 2

將您的JS更改為Following，如果第二個打開，它將關閉第一個下拉菜單。

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

小提琴