jQuery的崩潰點擊展開DIV

我的HTML看起來像jQuery的崩潰點擊展開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> 

<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崩潰，不擴大。提前致謝。

來源

2013-05-01 aaviss

它看起來像你第一次滑起來，然後滑動下來的切換：

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

我不知道你想實現什麼，但它看起來好像是第一行應走。

來源

2013-05-01 09:49:27 MarioDS

他試圖打開他點擊了一個前關閉所有其它描述的工作版本 – Bill 2013-05-01 09:50:30

嘗試改變/添加類的形象和綁定不同的功能：

$(".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-01 09:49:52 Bill

它摺疊和展開，因爲你調用slideUp方法所有.description分頻器（包括你想要的一個關閉），然後調用slideToggle。

你可以做的就是改變你的第一個.slideUp到不針對:first除法：

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

http://jsfiddle.net/CqC8r/

來源

2013-05-01 09:52:12

這是你的代碼：

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

這些前兩行互動與相應的.description元素重複兩次。一旦選擇全部並滑動它們，然後在僅獲取下一個.description元素時再次選擇 - 然後再調用.slideToggle()，這會再次滑下（因爲它已經彈起）。

我建議您的初始狀態是關閉所有描述，以便您不需要$(".description").slideUp(500);行，然後您可以切換.description元素對應於<h3>/<img>點擊。

來源

2013-05-01 09:52:14

下面將做你需要：

<script> 
$(function() { 
    $(".expandstory").click(function() { 
     $(this).parent().next("div").slideToggle(500); 
    }); 
}); 
</script>

它可以讓你也擴大描述它關閉後。

嘗試一下這裏： Jfiddle

來源

2013-05-01 09:55:16 HennyH

$(".expandstory").click(function() { 
    $(this).parent().nextAll('.description:first').slideToggle(500); 
});

，這裏是你的代碼中的jsfiddle http://jsfiddle.net/SamirAdel/Fey6T/

來源

2013-05-01 09:55:22

jQuery的崩潰點擊展開DIV

回答

相關問題