javascript - 使用 Javascript 隐藏和显示 div - 打开新标题时隐藏

Question

目前我可以点击标题，然后显示与标题相关的信息。如果选择了另一个标题，则它会在前一个打开的标题下方或上方打开，如果再次单击该标题，则它们会被隐藏。
我想做的是，如果一个标题已经打开，在点击另一个标题时它会隐藏前一个并显示最近点击的。

我目前正在使用的 javascript 如下

<script type="text/javascript">
 function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
 }

 function hide(divID) {
    var item = document.getElementById(divID);
    if (item == 'element_name') {
        item.className=(item.className=='hidden');
    }
 }

Answer 1

建议#1

给所有的标题元素一个通用的类名，例如title，然后使用 document.getElementsByClassName('title') 找到所有的标题元素，并在“取消隐藏”被点击的标题之前隐藏它们，如果被点击的标题元素被隐藏。

也就是说，您需要修改您编写的两个函数以在一个元素中容纳多个类。您可以通过 element.className = 'unhidden title' 轻松设置多个类名，但您的代码将相当不灵活。当您尝试通过 String#split 方法修改类名列表时，您的代码将很快变得笨拙，循环遍历类以查找和删除隐藏 或 未隐藏类。

建议#2

不要使用未隐藏 类。据推测，您的未隐藏类定义如下:

.unhidden {
  display: block;
}

如果您还有想要取消隐藏的内联元素，则该类的用处将大大降低，因为您将需要另一个类:

.unhidden-inline {
  display: inline;
}

如果你简单地定义:

.hidden {
  display: block;
}

并添加或删除隐藏类以隐藏或显示元素，则可以完全避免此问题。但是，您仍然会遇到在一个元素中处理多个类名的问题。

建议#3(理想)

使用jQuery或 Zepto.js处理 DOM 遍历和操作，这将使您的生活更加轻松。在这种情况下，您将不再需要操作类，您可以直接使用便捷方法简单地隐藏和显示元素。包括 jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

假设以下标记:

<ul>
  <li class="title">
    Title 1
    <div class="description">Best. Title. Ever.</div>
  </li>
  <li class="title">
    Title 2
    <div class="description">Second best title</div>
  </li>
  <li class="title">
    Title 3
    <div class="description">Worst. Title. Ever.</div>
  </li>
</ul>

和以下CSS:

<style type="text/css">
  .description {
    display: none;
  }
</style>

您可以通过以下方式以灵活的方式实现您的目标:

<script type="text/javascript">
  $('.title').click(function(event){
    currentDescriptionElement = $('.description', this); // this refers to the clicked DOM element in this context
    isHidden = currentDescriptionElement.is(':hidden');

    $('.title .description:visible').hide(); // hide all visible description elements

    if (isHidden)
      currentDescriptionElement.show();
  })
</script>

希望对您有所帮助，祝您好运!