1

私はjQueryの初心者で、プロジェクトに関して問題があります。

私はliphpによって作成された要素を持っており、各li要素divでいくつかのデータを表示するレイアウトを取得します。

にあるタイトルをクリックしてレイアウトを表示し、他のすべてを非表示にできるようにしたいのliですdivが、タイトルをもう一度クリックすると、レイアウトが非表示にdivなり、すべてのリストが再び表示されます。

構造は次のとおりです。

HTML:

<ul>
  <li>
    <div id="date">date</div>
    <a href="#" class="click">Title dynamically 1</a>
    <div id="location">location</div>
    <div class="layout">Data dynamically 1</div>
  </li>
  <li>
    <div id="date">date</div>
    <a href="#" class="click">Title dynamically 2</a>
    <div id="location">location</div>
    <div class="layout">Data dynamically 2</div>
  </li>
</ul>

私のjQueryコード:

  $('li a').click(function () {
          $('li a').next('.layout').slideToggle(600);
               $('li a').not(this).slideToggle(600);

このコードでは、タイトルのみを非表示にし、レイアウトを表示しません

私は多くの組み合わせを試しましたが、うまくいきませんでした。誰か助けてくれませんか?

4

2 に答える 2

0

ここをチェック、こう？http://jsfiddle.net/yeyene/eUzk8/

* 複数のリストには id の代わりに css クラスを使用してください。

HTML

<ul>
    <li>
        <div class="date">date</div>
        <a href="#" class="title">Title dynamically 1</a>
        <div class="location">location</div>
        <div class="layout">Data dynamically 1</div>
    </li>
    <li>
        <div class="date">date</div>
        <a href="#" class="title">Title dynamically 2</a>
        <div class="location">location</div>
        <div class="layout">Data dynamically 2</div>
    </li>
</ul>

Jクエリ

$('.title').click(function () { 
    var current = $(this).parent('li').children('.layout').css('display');
    if(current == 'none'){
        $(this).parent('li').children('.layout').slideDown(600);
        $(this).parent('li').children('.date, .location').not(this).hide();
    }
    if(current == 'block'){
        $(this).parent('li').children('.layout').slideUp(600);
        $(this).parent('li').children('.date, .location').not(this).show();
    }
});
于 2013-06-08T12:54:17.080 に答える
0

コード内のさまざまな問題:

  1. あなたの Javascript はバランスが取れておらず、実行時にエラーをスローします。
  2. $('li a')そのようなすべての要素に一致します。つまり、リンクをクリックすると、すべてのスライドが切り替わります
  3. あなたのデザインにも少し欠陥があります-私が正しく理解していれば。リンクをクリックしたときに、リンク自体を含むすべてを非表示にする必要があります。明らかに、リンク自体が非表示になっている場合、リンクを再度表示することはありません...
  4. next()何があっても次の要素のみを取得する権利を使用していません。
  5. .layoutオンクリックを表示したいのですが、既に表示されていますか? 要素を入れるdisplay: noneのを忘れたに違いない。.layout

私はこれがあなたが望むものだと信じています。jsフィドル

CSS

.layout {
    display: none;
}

Javascript

$('li a').click(function () {
    $(this).siblings().not('a').slideToggle(600);
});
  1. $(this)クリックされた要素を示し、jQuery オブジェクトに変換されます
  2. siblings()要素のすべての兄弟を取得します
  3. not()aリンクが非表示にならないように、取得したばかりの兄弟リストから要素を削除します
  4. 最後に、実際に slideToggle を呼び出します。everything elsejQuery は、表示されたものをすべて非表示にし ( )、非表示になったものをすべて表示する ( ) ほど巧妙.layoutです。

また、同じページ内に同じ要素を複数配置しないでidください。classそれらidの が重複する可能性がある場合に使用します。とは言っても交換

<div id="date">date</div>
<div id="location">location</div>

に

<div class="date">date</div>
<div class="location">location</div>
于 2013-06-08T12:35:42.237 に答える