Question

我正在为移动设备制作嵌套的无序导航列表。

如果再次点击li.dropdown，我只想崩溃ul ul。因此，任何时候只能看到一个ul ul。如果单击另一个li，则现在可以正常工作但不能在父li上工作。

需要我的jQuery脚本帮助。

当前状态示例：

的jQuery

<div class="ehtm">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="#">Sub Item 2-1</a></li>
                <li><a href="#">Sub Item 2-2</a></li>
                <li><a href="#">Sub Item 2-3</a></li>
                <li><a href="#">Sub Item 2-4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
                <ul>
                <li><a href="#">Sub Item 3-1</a></li>
                <li><a href="#">Sub Item 3-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a>
                <ul>
                <li><a href="#">Sub Item 4-1</a></li>
                <li><a href="#">Sub Item 4-2</a></li>
                <li><a href="#">Sub Item 4-3</a></li>
                <li><a href="#">Sub Item 2-4</a></li>
            </ul>
        </li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>
</div>

HTML

body
{
    margin:0;
    padding:0;
    font-family:Verdana, sans-serif;
}

ul
{
    list-style:none;
    margin:0;
    padding:0;
    background:#FAFAFA; 
}

ul li
{
    border-top:1px solid #666;
}

ul li a
{
    padding:12px;
    display:block;
    color:#666;
    text-decoration:none;
}

.ehtm > ul > li.dropdown > a:after
{
    content:"";
    display:inline-block;
    position:relative;
    margin-left:8px;
    vertical-align:middle;
    width:0;
    height:0;
    border-top: 4px dashed #666;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;     
}

ul ul
{
    display:none;   
}

ul li.open ul
{
    display:block;
    background:#e3e3e3;
}

ul li.open ul li
{
    padding-left:20px;  
}

CSS

{{1}}

Answer 1

试试这个： -

$(document).ready(function($) {
  $("div.ehtm ul li:has(ul)").addClass("dropdown");

    $("div.ehtm ul li.dropdown").click(function() {
      if(!$(this).hasClass('open')) {
      $('li.open').removeClass('open');
    } 
 $(this).toggleClass('open');
  });
});

Answer 2

试试这个。

随着时间的推移只打开一个下拉菜单当我们点击下拉的箭头变为折叠时

jQuery(document).ready(function($) {
 $("div.ehtm ul li:has(ul)").addClass("dropdown");
 $('div.ehtm > ul > li.dropdown > a').click(function(e) 
    e.preventDefault();
 });
 $("div.ehtm ul li.dropdown").click(function() {
      $("li.open").not($(this)).removeClass("open");
      if($(this).hasClass('open')){
      $(this).removeClass('open'); 
  }
      else{
         $(this).addClass('open');
      }
    });
});

简单的jQuery嵌套无序列表导航，用于父<li>上的移动点击功能

2 个答案: