0

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

我有 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>

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

4

1 回答 1

1

主要问题是您以非唯一方式使用 id。ID 是唯一的。改用一个类。

<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 更改为 classes。这将导致两个项目都显示。请参阅此 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 标签。有很多方法可以实现这一点，但您可能会发现这是一种更简洁的方法。请参阅此 jsfiddle以获取实时示例。

于 2013-06-14T00:59:06.157 回答