Question

我最近一直在试验jquery，希望扩展我的知识。我遇到了一些奇怪的事情。我有一个导航，我希望用户能够进一步扩展它。但是，每次单击展开时，它都会打开所有菜单而不是特定菜单。

$('.expandicon').click(function(){
  if ( $('.nav-bucket-items').css('display') == 'none' )
    $('.nav-bucket-items').css('display','block');
  else
    $('.nav-bucket-items').css('display','none');
});

以下是我使用的代码，以下是示例：https://jsfiddle.net/xajoujsx/

如您所见，当您单击展开+按钮时，它会打开所有导航。我只是想让它打开我点击的那个。谁能解释我做错了什么？

Answer 1

在点击处理程序中，您可以使用以下内容引用.nav-bucket-items

$(this).parent().siblings('.nav-bucket-items')

fiddle

Answer 2

代码当前在所有带有.nav-bucket类的元素上执行它。

一种选择是仅适用于父母的直接项目。

$('.expandicon').click(function() {
  var $ref = $($(this).parent().parent()).find('.nav-bucket-items')
  if ($ref.css('display') == 'none')
    $ref.css('display', 'block');
  else
    $ref.css('display', 'none');
});

Answer 3

这里发生的事情很少，首先，当你执行$('.nav-bucket-items')

时，你会定位所有元素

如果你在控制台中运行它，你应该看到一个元素列表而不是一个元素列表，所以我们要做的是定位父元素，然后找到兄弟元素，我们也想要定位元素链接而不是图标，这样用户可以点击整个元素进行扩展。

工作示例：https://jsfiddle.net/dg4z271m/1/

Answer 4

我喜欢它，因为我可以更多地了解他们的代码，而不仅仅是为了回答问题而修复代码。首先，让我先说你不需要.css（'display'，'block'）;显示或隐藏元素，因为.show（）en .hide（）会为您执行此操作。太棒了不是吗？所以，现在我们离开了。

$('.expandicon').click(function(){
    if ( $('.nav-bucket-items').css('display') == 'none' )
        $('.nav-bucket-items').show();
    else
        $('.nav-bucket-items').hide();
});

但是现在我们仍然遇到了多扩展菜单的问题。这是因为您使用类'.nav-bucket-items'显示（或隐藏）alle元素我们只是不想是我们点击的.expandicon家族的那些！你可以用$（this）做到这一点。您可以使用$（this）从您单击的元素进行遍历。让我们看看。

$('.expandicon').click(function(){
    if ( $('.nav-bucket-items').css('display') == 'none' )
        $(this).parent().next('.nav-bucket-items')
    else
        $(this).parent().next('.nav-bucket-items')
});

当你使用它时，它将全部按你的意愿工作。但我们可以比这更好！我们可以让它更短，更好，更清洁。我们不必检查.nav-bucket-items是否可见。不。

$('.expandicon').click(function(){
    $(this).parent().next('.nav-bucket-items').toggle();
});

你看到发生了什么事吗？我们只是将整堆代码改为一行，只是切换元素。因此，当它显示时它会隐藏它，它会显示它隐藏的时候！如果你真的想要一些奇特的效果，你可以使用slideToggle（）或fadeToggle（）而不是.toggle（）。我更新了你的JSFiddle：https://jsfiddle.net/xajoujsx/3/

无法使用扩展导航来处理导航

4 个答案: