Question

我希望能够在我的公司网站上展开和折叠Manu Nav，例如当有人使用移动设备访问我的网站时，如果点击Nav Icon，它会在我公司网站的前面打开，你会看到除非在移动设备上单击导航图标并出现Manu Nav，否则隐藏的Manu Nav相同，其工作正常。

但是有人点击了li标签，它会扩展li标签里面的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更改为关注，如果第二次打开，它将关闭第一个下拉列表。

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

菜单展开和折叠

2 个答案: