使用Javascript隐藏并显示divID - 打开新标题时隐藏 [英] Hide and show divID with Javascript - Hide when new title is opened

问题描述

目前我可以点击一个标题，然后显示与标题有关的信息。如果选择了另一个标题，那么它会在上一个打开标题的下方或上方打开，如果再次点击标题则隐藏它们。

我想要做的是，如果标题已经打开，在点击另一个标题时，它会隐藏上一个标题并显示最近点击的标记。

我目前使用的javascript是

 < script type =text / javascript> 
函数取消隐藏（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'）; 
 
 
 
 $解析方案

建议＃1

给所有标题元素一个普通的类名，例如 title ，然后使用 document.getElementsByClassName（'title'）来查找所有标题元素并全部隐藏如果被点击的标题元素被隐藏，那么在取消隐藏被点击的标题之前。

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

建议＃2

使用一个 unhidden 类。据推测，您的 unhidden 类定义如下：

  .unhidden {
 display：块; 
 
 
 
 
 
 $ b 
如果你有内联元素，取消隐藏，因为您需要另一个类：
  .unhidden-inline {
 display：inline; 
 
 $ / code> 
如果您简单地定义：
 
 
  .hidden {
 display：block; 
} 
  
并添加或移除隐藏的类以隐藏或显示元素，那么您可以完全避免这个问题。但是，您仍然会遇到在元素中处理多个类名称的问题。
 
 
 
建议＃3（理想）
 
 
 
使用 jQuery 或 Zepto.js 来处理DOM遍历和操作，它会让你的生活更轻松。在这种情况下，您将不再需要操作类，只需使用便捷方法直接隐藏和显示元素即可。包含jQuery： 
 
 
 < script type =text / javascriptsrc =http://code.jquery.com/的jquery-1.7.1.min.js>< /脚本> 
  
假设有以下标记： 
 
 
 < UL> 
< li class =title> 
标题1 
< div class =description>最佳。标题。以往< / DIV> 
< / li> 
< li class =title> 
标题2 
< div class =description>第二最佳标题< / div> 
< / li> 
< li class =title> 
标题3 
< div class =description>最差。标题。以往< / DIV> 
< / li> 
< / ul> 
  
和以下css： 
 
 
 < style type =text / css> 
 .description {
 display：none; 
} 
< / style> 
  
您可以通过以下方式以灵活的方式完成您的目标：
 < script type =text / javascript> 
'（'。title'）。click（function（event）{
 currentDescriptionElement = $（'。description'，this）; //这是指在此上下文中点击的DOM元素
隐藏= currentDescriptionElement.is（'：hidden'）; 
 
 $（'。title .description：visible'）。hide（）; //隐藏所有可见的描述元素
 
 if（isHidden）
 currentDescriptionElement.show（）; 
}）
< / script> 
  
我希望这会有所帮助，祝你好运！
 
Currently I'm able to click on a title and then the information relating to the title is shown. If another title is selected then it is opened either below or above the previous open title, if the title is clicked a second time then they are hidden.

What I'm trying to do is, if a title is already open, upon clicking on another title it would hide the previous and show the most recently clicked.

The javascript I'm currently working with is the following
<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');
    }
 }

解决方案
Suggestion #1

Give all of the title elements a common class name, e.g. title, then use document.getElementsByClassName('title') to find all of the title elements, and hide them all before "unhiding" the clicked title, if the clicked title element is hidden.

That being said, you'll need to modify the two functions you wrote to accommodate multiple classes in an element.  You can easily set multiple class names via element.className = 'unhidden title', but your code will be rather inflexible.  Your code will quickly become unwieldy as you try to modify your list of class names via the String#split method, looping through the classes to find and delete the hidden or unhidden classes.

Suggestion #2

Do not to use an unhidden class.  Presumably, your unhidden class is defined as follows:
.unhidden {
  display: block;
}
This class becomes much less useful if you have inline elements as well that you want to unhide because you'll need another class:
.unhidden-inline {
  display: inline;
}
If you simply define:
.hidden {
  display: block;
}
and add or remove the hidden class to hide or show the element, then you can avoid this issue altogether.  You'll still have the issue of dealing with multiple class names in an element, however.

Suggestion #3 (ideal)

Use jQuery or Zepto.js to handle DOM traversal and manipulation, it will make your life much easier.  You'll no longer need to manipulate classes at all in this case, you can simply hide and show the elements directly with convenience methods.  Include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Assuming the following markup:
<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>
and the following css:
<style type="text/css">
  .description {
    display: none;
  }
</style>
you can do the following to accomplish your goal in a flexible manner:
<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>
I hope this helps, good luck!

                        
这篇关于使用Javascript隐藏并显示divID  - 打开新标题时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！