2

私のHtmlは次のようになります

<h3><a href="#" title="story title">Story Title</a>
    <img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>

<h3><a href="#" title="story title">Story Title</a>
    <img class="expandstory" src="/images/plus.png" /></h3>
<div class="description">Short description about the story</div>

私のjqueryは次のようになります

$(".expandstory").click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png');
});

すべて正常に動作します。しかし、マイナス画像をクリックすると、divが折りたたまれて再び展開されます。div を折りたたんで展開しないようにする方法。前もって感謝します。

4

6 に答える 6

0

最初に上にスライドさせてから、トグルで下にスライドさせているようです。

$(".description").slideUp(500); // Slide up
$(this).parent().nextAll('.description:first').slideToggle(500); // slide down

あなたが何を達成しようとしているのか正確にはわかりませんが、最初の行が必要なようです。

于 2013-05-01T09:49:27.310 に答える
0

画像にクラスを変更/追加して、さまざまな関数をバインドしてみてください。

$(".expandstory").not('.close').click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png').addClass('close');
});
$(".expandstory.close").click(function()  {
   $(".description").slideUp(500);
   $(this).attr('src','/images/plus.png').removeClass('close');
});
于 2013-05-01T09:49:52.810 に答える
0

slideUpメソッドをすべての.description仕切り (閉じたいものを含む) を呼び出してから呼び出しているため、折りたたまれて展開されますslideToggle。

できることは、最初にディバイダーをターゲットに.slideUpしないように変更することです。:first

$(".description")
    .not($(this).parent().nextAll('.description:first')).slideUp(500);

http://jsfiddle.net/CqC8r/

于 2013-05-01T09:52:12.217 に答える
0

コードは次のとおりです。

$(".expandstory").click(function()  {
   $(".description").slideUp(500);
   $(this).parent().nextAll('.description:first').slideToggle(500);
   $(this).attr('src','/images/minus.png');
});

これらの最初の 2 行は、対応する.description要素と 2 回相互作用します。それらすべてを選択して上にスライドするときと、次の.description要素のみを取得するときにもう一度呼び出します.slideToggle()。

行が必要ないように、初期状態はすべての説明が閉じていることをお勧めします。その後、クリックした要素に対応する要素を$(".description").slideUp(500);切り替えることができます。.description<h3>/<img>

于 2013-05-01T09:52:14.533 に答える