1

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');
    }
 }
4

4 に答える 4

2

提案＃1

すべてのタイトル要素に共通のクラス名を付けます。たとえばtitle、 を使用document.getElementsByClassName('title')してすべてのタイトル要素を検索し、クリックしたタイトル要素が非表示の場合は、クリックしたタイトルを「再表示」する前にそれらをすべて非表示にします。

そうは言っても、要素内の複数のクラスに対応するには、作成した 2 つの関数を変更する必要があります。を介して複数のクラス名を簡単に設定でき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>

これがお役に立てば幸いです、頑張ってください！

于 2012-04-11T10:31:47.920 に答える
0

unhide（）を呼び出す前に呼び出す必要がある、hideall（）などの別の関数を構成する必要があります。ここで、最初に開いているものをすべて閉じてから、クリックしたものだけを再表示します。あなたはhide（）を必要とせず、ただhideall（）を必要とします

于 2012-04-11T11:53:24.713 に答える
0

jqueryタブの使用を検討してみませんか

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

これがあなたが期待していることだといいのですが。

説明で利用可能なテーマオプションを確認できます。ベースのCSSを変更したい場合は、それを見てみるとよいでしょう。

于 2012-04-11T10:30:36.713 に答える
0

これを試すことができます：

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

呼び出しごとに分割を渡す必要があります。

于 2012-04-11T10:31:57.777 に答える