Question

我正在尝试使用JQuery切换创建滑动子菜单。我尝试过以下但无济于事：

<script> $(".menu li a").click(function(){ var ul = $(this).children("ul"); if (ul.is(":none")) { ul.slideDown(); } else { ul.slideUp(); } }); </script>

以及

<script> $("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); }); </script>

它适用的HTML代码是：

<div class="menu-brk-products-container">
<ul id="menu-brk-products" class="menu">
  <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
       <ul class="sub-menu">
           <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a>
           </li>
      </ul>
  </li>

Answer 1

点击装订必须在文档加载后完成：

$(document).ready(function() {
$("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); });
});

此外，此点击也绑定到 a 元素，因为它不包含任何 ul ，所以它不会执行任何操作。如果你想让“电池供电警报”在“烟雾警报器......”上切换，请点击然后从一个选择器中移除（但它也会使“电池供电警报”在点击时消失，你需要不同的选择器。）

Answer 2

尝试：

<div class="menu-brk-products-container">
    <ul id="menu-brk-products" class="menu">
        <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a>
            <ul class="sub-menu" style="display: none">
                <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a></li>
            </ul>
        </li>
    </ul>
</div>

<script>
$(document).ready(function() {
    $(".menu li a").click(function(){ 
        var ul = $(this).parent().children("ul"); 

        if (ul.is(":hidden")) { 
            ul.slideDown(); 
        } 
        else { 
            ul.slideUp(); 
        }
    });
});
</script>

最大的问题是让孩子们。 “this”是锚标记，而不是＆lt; li＆gt;元素，因此没有匹配回来。如果我们应该向上或向下滑动，我还将测试更改为“：hidden”。

试图在JQuery中创建滑动切换子菜单

2 个答案: