1

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

我目前正在使用的 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');
    }
 }
4

4 回答 4

2

建议 #1

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

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

建议#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!

于 2012-04-11T10:31:47.920 回答
0

为什么不考虑使用jquery选项卡

http://jqueryui.com/demos/tabs/

我希望这是你期望做的。

您可以在描述中看到可用的主题选项。如果你想改变它的基础 css，你可以考虑看看

于 2012-04-11T10:30:36.713 回答
0

You can try this:

<script type="text/javascript">
function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
       document.getElementById(divID).style.display = 'block';
   }
} 
function hide(divID) {
   var item = document.getElementById(divID);
   if (item) {
      document.getElementById(divID).style.display = 'none';
  }
}   
</script>

You have to pass divid as per your call.

于 2012-04-11T10:31:57.777 回答
0

You got to configure another function say hideall() which needs to be called before you call unhide() where you close all that are open first and then unhide only whats clicked. You do not need hide(), just hideall()

于 2012-04-11T11:53:24.713 回答