显示下一个'；李'；在javascript中-标题相同'；李'；

我有一些Javascript/PHP代码，它以循环的形式引入了RSS提要，这样我就可以在它的开头和结尾编写一些代码。（但我想我在开头和结尾写的文字可能每次都需要相同。）

所以我真正需要的是一些javascript来隐藏除第一个以外的所有其他li，并且只在单击下一个/上一个按钮时显示它们。我宁愿不使用jquery，因为它将是一个小型的1页应用程序（但如果需要，将接受！）

帖子1
帖子2
3号职位
帖子4

---

有什么办法吗？

首先，您应该为

元素使用一个标识符。然后，不能对所有

元素使用相同的ID。每个元素都必须有自己的ID，或者更好的是，您可以使用HTML+CSS+JavaScript的组合来实现您的目标

HTML:
<ul id="myList" class="collapsed">
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
  <li>Post 4</li>
</ul>
<button id="btnTest">Click Me</button>

CSS:
ul.collapsed li:first-child {
  display:block;
}

ul.collapsed li {
  display:none;
}

JS:
document.getElementById('btnTest').addEventListener('click', function(){
  var list = document.getElementById('myList'),
      classes = list.className;
  if ( /collapsed/.test( classes ) ) {
    list.className = classes.replace( 'collapsed', '' );
  } else {
    list.className = classes + ' collapsed';
  }
});

测试它的代码

---

此示例使用HTML+CSS和纯JavaScript以交互方式显示/隐藏单个列表项：

HTML:
<ul id="myList">
  <li class="show">Post 1</li>
  <li class="hide">Post 2</li>
  <li class="hide">Post 3</li>
  <li class="hide">Post 4</li>
</ul>

<button id="btnShowOne">Show Item</button>
<button id="btnHideOne">Hide Item</button>

CSS:
.hide {
  display: none;
}

.show {
  display: block;
}

JS:
function iterateAndToggleClass( elements, classNameFind, classNameReplace, isTopDown ) {
  if ( isTopDown ) {
    for ( var i = 0; i < elements.length; i++ ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  } else {
    for ( var i = elements.length - 1; i >= 0; i-- ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  }
}

document.getElementById('btnShowOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'hide', 'show', true );
});

document.getElementById('btnHideOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'show', 'hide', false );
});

HTML：

Post 1
帖子2
发布3
发布4

展示项目
隐藏项
CSS:
.隐藏{
显示：无；
}
.表演{
显示：块；
}
JS:
函数iterateAndToggleClass（元素、classNameFind、classNameReplace、isTopDown）{
如果（isTopDown）{
对于（var i=0；i=0；i--）{
var元素=元素[i]；
if（element.className===classNameFind）{
element.className=classnameplace；
返回；
}
}
}
}
document.getElementById（'btnShowOne'）。addEventListener（'click'，函数（evt）{
evt.preventDefault（）；
evt.stopPropagation（）；
var list=document.getElementById（'myList'），
items=list.getElementsByTagName（'li'）；
iterateAndToggleClass（项“隐藏”、“显示”、“为真”）；
});
document.getElementById（'btnHideOne'）。addEventListener（'click'，函数（evt）{
evt.preventDefault（）；
evt.stopPropagation（）；
var list=document.getElementById（'myList'），
items=list.getElementsByTagName（'li'）；
iterateAndToggleClass（项'show'，'hide'，false）；
});

---

当然，这不是经过优化的代码，但我希望它足够清晰。您可以在

进行测试。您应该将li从id更改为类。id是唯一的，因此您的标记无效，并且根据浏览器的不同，可能会产生不同的结果。作为一个小型单页应用程序并不是不使用jQuery的理由。jQuery的重量很轻，使它更容易和更快10倍。我们现在不使用jQuery需要理由吗？@ithcy:你说得对。尽管如此，flem最终还是设法证明不使用它是合理的。“但是如果需要的话会接受的！”：jQuery从来都不是必须的。jQuery提供的一切都可以在没有它的情况下完成，即使它要复杂得多。毕竟这只是一个库。请在你的答案中也包含代码。如果由于任何原因无法访问JSFIDLE，那么您的答案将变得毫无用处。这很酷。但只需每隔

显示一次，可见的除外。不只是下一个。虽然我明白你的意思，但我应该指出

而不是抱歉，我误解了你的要求。如果您需要以交互方式逐个显示
元素，只需获得所有要迭代的项的列表即可。单击按钮/链接时，迭代列表以查找第一个可用的隐藏元素，然后删除隐藏该元素的类并终止迭代（反之亦然，则隐藏项目）。我知道，用这种方式解释可能有点难理解，所以如果你需要，我可以编辑我的答案，用一个例子来更好地解释。@Ragnarokkr我真的很喜欢。我花了一个晚上研究这个问题。你的JS提琴很酷：）@user1978360我添加了代码和链接，这样你就可以直接在JSFIDLE上测试它了。请注意，此示例适用于最近的所有浏览器，但如果您需要与IE兼容，则必须调整代码，以便根据IE的DOM细节正确附加事件

$('#btnTest').on('click', function(){
  $('#myList').toggleClass('collapsed');
});

HTML:
<ul id="myList">
  <li class="show">Post 1</li>
  <li class="hide">Post 2</li>
  <li class="hide">Post 3</li>
  <li class="hide">Post 4</li>
</ul>

<button id="btnShowOne">Show Item</button>
<button id="btnHideOne">Hide Item</button>

CSS:
.hide {
  display: none;
}

.show {
  display: block;
}

JS:
function iterateAndToggleClass( elements, classNameFind, classNameReplace, isTopDown ) {
  if ( isTopDown ) {
    for ( var i = 0; i < elements.length; i++ ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  } else {
    for ( var i = elements.length - 1; i >= 0; i-- ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  }
}

document.getElementById('btnShowOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'hide', 'show', true );
});

document.getElementById('btnHideOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'show', 'hide', false );
});