Question

我已经浏览了本网站上我认为可能有帮助的其他一些问题，例如this one和this one，但他们似乎无法回答我的问题。我所拥有的是以下内容：

＆＃13;

$(document).ready(function() {
	$(".has-submenu ul").hide();
  $(".has-submenu").click(function() {
  	$(this).children("ul").toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

＆＃13;

从这个片段中可以看出，无论我是否点击＆＃34;第2项和第34条，子菜单都会隐藏。或＆＃34;子项1＆＃34;。我意识到这是因为＆＃34; Sub Item 1＆＃34;是<li class="has-submenu">的一部分，所以当它点击它时，它会通过并切换子菜单。 CSS正在做他们应该做的事情，我只是不知道如何调整CSS来说“＃34;只有在点击父li时才隐藏子菜单。我尝试修改JQuery click函数以查找$(".has-submenu a")以指定它应该只在单击该特定元素时执行此操作，但这似乎没有帮助。

我确定这很容易解决，我只是不知道该怎么做。谢谢！

Answer 1

您可以使用$(".has-submenu > a")点击选择仅a为直接子项的.has-submenu，然后使用next()定位ul

＆＃13;

$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
  $(this).next("ul").toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您必须将选择器更改为$(".has-submenu>a")并在点击时切换其.siblings("ul")。

$(document).ready(function() {
  $(".has-submenu ul").hide();
  $(".has-submenu>a").click(function() {
    $(this).siblings("ul").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
  </li>
</ul>

Answer 3

即使.has-submenu有多个项目，这也有效。

＆＃13;

$(".has-submenu ul").hide();
$(".has-submenu > a").click(function() {
  $(this).parent().find('ul').each(function(){$(this).toggle();});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Item 1</a></li>
  <li class="has-submenu"><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub Item 1</a></li>
    </ul>
    <ul>
      <li><a href="#">Sub Item 2</a></li>
    </ul>
  </li>
</ul>

＆＃13;

仅在单击父li时才切换ul子菜单的显示

3 个答案: