Question

我正在尝试制作导航菜单：https://jsfiddle.net/f73wa3w1/1/

我有一个错误。如果我们点击li.submenu_f然后li.submenu_s再次点击li.submenu，我们会发现错误。屏幕截图：http://dl2.joxi.net/drive/2016/06/07/0017/1846/1148726/26/0c40123255.jpg

我不知道如何解决这个问题。任何人都可以帮助我吗？

＆＃13;

$('.cc_name').click(function() {
  $('.categories').stop().slideToggle(300);
})

$('.submenu_f > a').click(function() {
  $('.submenu_f ul').slideUp(300);
  $(this).parent().children('ul').stop().slideToggle(300);
})

$('.submenu_s > a').click(function() {
  $('.submenu_s ul').slideUp(300);
  $(this).parent().children('ul').stop().slideToggle(300);
})

＆＃13;

.categories,
#categories ul li ul,
#categories ul li ul li ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
    <div class="cc_name">Каталог товаров</div>
    <div class="categories">
        <ul>
            <li class="cat_icon"><a href="#" title="">Электроника</a></li>
            <li class="cat_icon"><a href="#" title="">Бытовая техника</a></li>
            <li class="cat_icon"><a href="#" title="">Компьютеры</a></li>
            <li class="cat_icon"><a href="#" title="">Товары для дома</a></li>
            <li class="cat_icon"><a href="#" title="">Товары для авто</a></li>
            <li class="cat_icon"><a href="#" title="">Сад и огород</a></li>
            <li class="cat_icon"><a href="#" title="">Строительство и ремонт</a></li>
            <li class="cat_icon submenu_f">
                <a href="#" title="">Подарки и украшения</a>
                <ul>
                    <li class=""><a href="#" title="">Теле-видео-аудио техника</a></li>
                    <li class=""><a href="#" title="">Телефоны и связь</a></li>
                    <li class="submenu_s">
                        <a href="#" title="">Фото и видео</a>
                        <ul>
                            <li class=""><a href="#" title="">Плиты</a></li>
                            <li class=""><a href="#" title="">Вытяжки</a></li>
                            <li class=""><a href="#" title="">Холодильники</a></li>
                            <li class=""><a href="#" title="">Духовые шкафы</a></li>
                            <li class=""><a href="#" title="">Варочные поверхности</a></li>
                            <li class=""><a href="#" title="">Посудомоечные машины</a></li>
                            <li class=""><a href="#" title="">Стиральные машины</a></li>
                            <li class=""><a href="#" title="">Аксессуары</a></li>
                        </ul>
                    </li>
                    <li class=""><a href="#" title="">Портативная электроника</a></li>
                    <li class=""><a href="#" title="">Прочая электроника</a></li>
                    <li class=""><a href="#" title="">Элементы питания</a></li>
                </ul>
            </li>
            <li class="cat_icon"><a href="#" title="">Парфюмерия и косметика</a></li>
            <li class="cat_icon"><a href="#" title="">Товары для детей</a></li>
            <li class="cat_icon"><a href="#" title="">Товары для спорта и отдыха</a></li>
            <li class="cat_icon"><a href="#" title="">Товары для животных</a></li>
            <li class="cat_icon"><a href="#" title="">Одежда и обувь</a></li>
            <li class="cat_icon"><a href="#" title="">Бытовая химия</a></li>
            <li class="cat_icon submenu_f"><a href="#" title="">Фермерские товары</a>
                <ul>
                    <li class="submenu_s">
                        <a href="">1</a>
                        <ul>
                            <li class=""><a href="">1</a></li>
                        </ul>
                    </li>
                    <li class="submenu_s">
                        <a href="">2</a>
                        <ul>
                            <li class=""><a href="">2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

＆＃13;

Answer 1

问题是JQuery UI需要特定样式才能切换元素的高度。您可以通过在动画中的特定点处创建元素auto的高度来找到解决方法。打开列表时，请删除自动高度。但是，关闭列表时，请添加自动高度：

$('.cc_name').click(function(){
        $('.categories').stop().slideToggle(300);
})

$('.submenu_f > a').click(function(){
  $('.submenu_f ul').removeClass('modify-height');
    $(this).parent().children('ul').stop().slideToggle(300,function(){
    $(this).addClass('modify-height');
  });
})

$('.submenu_s > a').click(function(){
  $('.submenu_s ul').removeClass('modify-height');
    $(this).parent().children('ul').stop().slideToggle(300,function(){
    $(this).addClass('modify-height');
  });
})

对于toggling语句，我添加了一个回调来添加/删除一个修改height属性的类。这是添加的CSS：

.modify-height{
  height: auto !important;
}

请参阅小提琴：https://jsfiddle.net/f73wa3w1/5/

注意：我删除了其他幻灯片切换语句。即使在那里也可以使用它，但是在尝试重新创建问题时你会发现有点不稳定。

更新更优雅的解决方案

问题是您没有正确关闭最底层的子菜单。此代码中没有回调，只是对原始代码进行了一次小调整：

$('.cc_name').click(function(){
        $('.categories').stop().slideToggle(300);
})

$('.submenu_f > a').click(function(){
  $('.submenu_s ul').slideUp(300); //slide up the child 'ul' here
  $(this).delay(300).parent().children('ul').stop().slideToggle(300); //add a delay equal to the child 'ul' animation to compensate for any lag
})

$('.submenu_s > a').click(function(){
    $(this).parent().children('ul').stop().slideToggle(300);
})

https://jsfiddle.net/f73wa3w1/6/

Answer 2

它在我的电脑上工作？也许它是一个浏览器的东西

如何修复bug显示/隐藏子菜单？

2 个答案: