Question

这是我正在使用的两个脚本

第一个箭头在.a之后添加具有sub-menu，.has children

的箭头

jQuery(function($) {
  $('a + ul').prev('a').append('<span class="sub-menu-open">&#9660</span>');
});

此秒打开sub-menu，但在菜单上单击。

jQuery(function($) {
  $('.sub-menu').hide(); //Hide children by default
  $('.menu').children('').click(function(){
    event.preventDefault();
    $(this).children('.sub-menu').slideToggle('slow');     
  });
});

这是html代码。

<ul id="menu-izb" class="menu">
  <li id="menu-item" class="bp-menu ">
    <a href="/">Activity</a>
  </li>
  <li id="menu-item" class="bp-menu">
    <a href="/">Log Out</a>
  </li>
  <li id="menu-item" class="menu-item"><a href="/">Blog
    <span class="sub-menu-open">▼</span>
    </a>
    <ul class="sub-menu" style="">
    ...

如何在<span class="sub-menu-open">▼</span>上单击时使子菜单切换？

Answer 1

我不知道您的JS代码在做什么。但这是“单击跨度时打开子菜单”的解决方案：

<ul id="menu-izb" class="menu">
  <li id="menu-item" class="bp-menu ">
    <a href="/">Activity</a>
  </li>
  <li id="menu-item" class="bp-menu">
    <a href="/">Log Out</a>
  </li>
  <li id="menu-item" class="menu-item has-children"><a href="">Blog
  <span class="sub-menu-open">▼</span></a>
    <ul class="sub-menu" style="">
      <li id="menu-item" class="menu-item">
         Bla1
      </li>
      <li id="menu-item" class="menu-item">
         Bla2
      </li>
      <li id="menu-item" class="menu-item">
         Bla3
      </li>
    </ul>
  </li>
</ul>




 <script>
jQuery(function($) {
  $('.sub-menu').hide(); 
  $('.sub-menu-open').parent().click(function(e){
                e.preventDefault();
        $(this).parent().find(".sub-menu").toggle();
    });
});
</script>

这是一个工作中的小提琴： https://jsfiddle.net/ehg49dso/9/

如何单击跨度打开子菜单？

1 个答案: