"more"ボタンは特定のdivのみを展開します

私のjqueryコードに問題があります。私は2つのセクション（contaier）を持っています。 Insdieこのcointainers私は同様の構造を持っています。以下のコード。私がしたいことは、最初のコンテナの "more"ボタンをクリックしたときに、このdivにのみ隠し情報を表示したい場合です。 2番目のコンテナでmoreをクリックすると、このdivにのみ隠し情報が表示されます。どうやってするか？今、私のボタンは、次の情報を見つけるのすべてのdiv"more"ボタンは特定のdivのみを展開します

$('.info').hide(); 
 
$('.show-info').click(function(){ 
 
    $('.info').slideToggle("fast"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <p>adsadasdasd</p> 
 
    <a href="#" class="btn btn-default show-info">more</a> 
 
    <div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <p>adsadasdasd</p> 
 
    <a href="#" class="btn btn-default show-info">more</a> 
 
    <div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-07 MMPL1

あなたはそれだけで、関連するボタンを展開することを確認するために、 'this'を使用する必要があります。あなたの*現在の* htmlを仮定すると、これはおそらく次のようになります：$（this）nextAll（ "。info"）。first（）。sldieToggle（）; ' –

インデントを修正すると、 slideToggle（） ' –

@ freedomn-mこの構造をしていて、ボタンの後に最初のdivを展開したいのですがどうすればいいですか？

は< - この行の複数のボタンを読み取る

< - 隠された情報

< - この行の複数のボタンを読み取る

< - 隠しボタンと隠し情報は、2つの分離している基本的にあれば情報コンテナ - https://codepen.io/eMeM/pen/Xapybz – MMPL1

私は第二の容器でより多くのをクリックすると、私はこれだけのdivに隠された情報を表示したいです。

ここで、マイボタンはすべてのdivのすべての非表示情報を展開します。

問題

は、あなたが言う

$(".info").slideToggle()

使用していることである：クラス.infoとslideToggle はすべてのアイテムを - 代わりに、あなたがクリックしたボタンに一致するだけ.show-infoに制限する必要があります。

これは、イベントハンドラ内でthisを使用して行います。

この情報があれば、関連するアイテムを見つけることはHTML構造に依存し、シナリオごとに異なります。この質問の場合：各情報/ショー情報は、後続の.rowの行にある

$('.info').closest(".row").hide(); 
$('.show-info').click(function(){ 
    $(this).closest('.row').next().slideToggle("fast"‌); 
});

。

（.nextAll().first()のOPコメントは、.next()と同じです（通常は.nextAll(filter).first()を使用します）。

（hideも変更して、スライドに一致するように.row行を非表示にする必要があります）。

更新：質問/コメントで述べたように、これは、次のHTMLを前提としています

<div class="container"> 
    <div class="row"> 
    <p>some info</p> 
    <a href="#" class="btn btn-default show-info">more</a> 
    </div> 
    <div class="row"> 
    <div class="info"> 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
    </div> 
    </div> 
    <div class="row"> 
    <p>second row of info</p> 
    <a href="#" class="btn btn-default show-info">more</a> 
    </div> 
    <div class="row"> 
    <div class="info"> 
     <div>Second set of expanded info.</div> 
    </div> 
    </div> 
</div>

あなたはtoggling.rowしているならば、それはあなたが最初に非表示にする必要があるものだということを示しています。

注：JS経由で隠すのではなく、すなわち、負荷に非表示にする方が良いだろう。

<div class="row" style='display:none'> 
    <div class="info">

出典

2017-08-07 09:17:57

$（ '。info'）。closest（"。row "）を使用するポイントは何ですか？隠す（）;隠された情報を持つdivが同じクラスを持つとき。これは間違っていますか？それはなぜですか？ $（ '。info'）。hide（）; – MMPL1

「隠された情報を持つdivが同じクラスを持っているとき」とは何を意味するのかよく分かりません。 '.info'を隠してから' .row'を表示すると、表示する行にはまだ隠れた情報が残っています。 –

使用next()機能ですべての隠された情報を拡張し、それを切り替えます。また、ページロード呼び出し時に非表示にしたい場合は、オンロードを非表示にするか、cssを使用して表示しないでください。

$('.show-info').click(function(){ 
 
    $(this).next(".info").slideToggle("fast"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
<p>adsadasdasd</p> 
 
<a href="#" class="btn btn-default show-info">more</a> 
 
<div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
<p>adsadasdasd</p> 
 
<a href="#" class="btn btn-default show-info">more</a> 
 
<div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-07 08:37:39

これは、 '.next（）'がどのように動作するかではありません。次の項目を返し、クラスにフィルタリングします。だからあなたは一つの項目か一つを得るので、 '.first（）'の必要はなく、 ''すべての次の情報を見つけることはできません。 - '.nextAll（）'で置き換えます。 –

@ freedomn-m Ahhはそれを完全に逃した。最初の（）を削除しました。 –

-1

使用このコード：

$('.info').hide(); 
 
$('.show-info').click(function(){ 
 
    $('.info').slideUp('fast'); 
 
    $(this).closest(".row").find(".info").slideToggle('fast'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
<p>adsadasdasd</p> 
 
<a href="#" class="btn btn-default show-info">more</a> 
 
<div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
<p>adsadasdasd</p> 
 
<a href="#" class="btn btn-default show-info">more</a> 
 
<div class="info"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-08-07 08:38:31

あなたがしたことを説明してください。誰も答えを求めているわけではありません。 – Durga

リンクをクリックすると、開いているdivをすべて非表示にし、現在のdiv内の '.info'を見つけて開きます。 –

最良の方法は、現在の行とslideToggleその中に隠された情報を見つけることです。

は、スニペットを見てみましょう：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <p>adsadasdasd</p> 
 
     <a href="#" class="btn btn-default show-info">more</a> 
 
     <div class="info"> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <p>adsadasdasd</p> 
 
     <a href="#" class="btn btn-default show-info">more</a> 
 
     <div class="info"> 
 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script> 
 
    $('.info').hide(); 
 
    $('.show-info').click(function(){ 
 
     
 
     $(this).parent().find('.info').slideToggle("fast"); 
 
    }); 
 
    </script>

出典

2017-08-07 09:35:12

"more"ボタンは特定のdivのみを展開します

答えて

関連する問題