Question

我正在尝试使用产品列表进行简单的下拉菜单，以便在点击时过滤产品，因此下拉菜单是 Onclick 。

问题 -

我在一个类别中有多个产品，我正在尝试使用下拉列表来折叠其他未在点击时使用的产品。

当前脚本我已经折叠了所有内容并再次打开它，并且无法在打开时向其显示一个类以显示向下的内容。

实现这个或教程/脚本或其他什么方法还有其他方法。

$('.topnav li a').click(function(){
    if($(this).parent().children().is('ul'))
    {
        $(this).parent().find('ul').slideToggle();
    }
    else
    {
        if($(this).parent().parent().is('ul.topnav'))
        {
            $('.topnav').find('ul').slideUp();
        }
        else
        {
            $('.topnav').find('ul').slideUp();
            $(this).parent().parent().slideDown('slow');
        }
    }
});

Answer 1

我没有针对您的问题的具体解决方案，

但是你仍然可以查看这个Select2 jquery插件，你可以有很多设施，比如搜索和显示图片，只需查看此链接Select2 - DropDown

希望这会对你有所帮助......

Answer 2

请看下面的链接

http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/

您可以在那里查看演示以获得多级下拉菜单。

Answer 3

从你的jsfiddle改变了一些代码（html和脚本），看看你是否正在寻找

http://jsfiddle.net/nextg_tech/4N3wA/

脚本

$('.topnav li a').click(function(){
    if($(this).parent().children().is('ul'))
    {
        $(this).parent().find('ul').slideToggle();
    }
    else
    {
        if($(this).parent().parent().is('ul.topnav'))
        {
            $('.topnav').find('ul').slideUp();
        }
        else
        {
            $('.topnav').find('ul').slideUp();
            $(this).parent().parent().slideDown('slow');
        }
    }
});

HTML

<div class="container">
 <ul class="productfilters topnav">

    <li><a href="#" data-filter="*" class="current">All</a></li>
     <li class="hasarrow">
      <a href="#" id="nfbt" data-filter=".pone">Product 1</a>
        <ul class="ddone">
         <li class="hasarrow"><a href="#" data-filter=".ptwo">Sub Product 1</a>
                <ul class="ddone">
                    <li><a href="#">Sub 2 Product 1</a></li>
                    <li><a href="#">Sub 2 Product 1</a></li>
                    <li><a href="#">Sub 2 Product 1</a></li>
                    <li><a href="#">Sub 2 Product 1</a></li>
                </ul>
            </li>
         <li><a href="#" data-filter=".pthree">Sub Product 2</a></li>
         <li><a href="#" data-filter=".pfour">Sub Product 3</a></li>
        </ul>
    </li>
    <li class="hasarrow"><a href="#" data-filter=".pval">Product 2</a> 
     <ul class="ddone">
         <li><a href="#">Sub Product of 2</a></li>
         <li><a href="#">Sub Product of 2</a></li>
         <li><a href="#">Sub Product of 2</a></li>
         <li><a href="#">Sub Product of 2</a></li>
     </ul>
     </li>
</ul>
</div>

在jquery中使用箭头的简单下拉列表

3 个答案: