Question

我正在尝试制作支持展开切换的导航。

我想要显示2个子导航项目，但它只显示第一个，它应该显示两个项目。如何让它显示每个具有相同ID的项目？

    <ul>
      <li> <a href="#nav1" class="nav-toggle">Example <span class="nav-plus"></span></a>
      <li id="nav1" style="display:none;"><div class="orange-bar"></div><a href="page1.php">Navigation 1</a></li>
      <li id="nav1" style="display:none;"><div class="orange-bar"></div><a href="page2.php">Navigation 2</a></li>
    </ul>


    <script>
    $(document).ready(function() {
      $('.nav-toggle').click(function(){
        var collapse_content_selector = $(this).attr('href');                   
        var toggle_switch = $(this);

        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none'){
            toggle_switch.html('Example <span class="nav-plus"></span>');
          }else{
            toggle_switch.html('Example <span class="nav-minus"></span>');
          }
        });
        return false;
      });

    }); 
    </script>

这只是导航示例，会有多个展开导航项。

Answer 1

主要问题是您以非独特的方式使用ID。 Ids意味着独特。改为使用一个类。

<ul>
    <li> <a href=".nav1" class="nav-toggle">Example <span class="nav-plus"></span></a></li>
    <li class="nav1" style="display:none;"><div class="orange-bar"></div><a href="page1.php">Navigation 1</a></li>
    <li class="nav1" style="display:none;"><div class="orange-bar"></div><a href="page2.php">Navigation 2</a></li>
</ul>

注意我将href更改为“.nav1”，然后将后续li标签上的ID更改为类。这将导致两个项目显示。有关证据，请参阅this jsfiddle。

此外，第一个li错过了结束标记，所以我也修复了它。

这将解决您的问题，但对我来说感觉有点费解。使用href属性来引用其他元素的id或类有点不寻常。您可能需要考虑不同的方法，例如：

  $('.nav-toggle').click(function(){
    var collapse_content_selector = $(this).closest('ul').find('.nav1');                   
    var toggle_switch = $(this);

    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
        toggle_switch.html('Example <span class="nav-plus"></span>');
      }else{
        toggle_switch.html('Example <span class="nav-minus"></span>');
      }
    });
    return false;
  });

请注意，我没有使用href来查找后续的li标签，而是找到父级ul，然后查找任何具有“nav1”类的li标签。有很多方法可以实现这一目标，但您可能会发现这是一种更清洁的方法。有关实例，请参阅this jsfiddle。

折叠具有相同ID的多个对象

1 个答案: