Показать Скрыть ближайший элемент щелкнул

Question

http://jsfiddle.net/KevinOrin/xycCx/1/

jQuery('.happening-main-text .readmore').click(function() {     
    jQuery('.divmore').toggle('slow');  
    return false;          
}); 

Я пытаюсь получить каждую ссылку, чтобы показать/скрыть только один щелчок. Как я могу изменить JS для этого. Я попробовал ('.happening-main-text').closest('divmore'), и это тоже не сработало.

<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 

    </p> 
    <div class="divmore"> 
     <p>more test from hidden1</p> 
    </div> 
</div> 
<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 

    </p> 
    <div class="divmore"> 
     <p>more test from hidden</p> 
    </div> 
</div> 
<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 

    </p> 
    <div class="divmore"> 
     <p>more test from hidden2</p> 
    </div> 
</div> 

Answer 1

Если держать ваш текущий формат HTML следующий код должен работать

jQuery('.happening-main-text .readmore').click(function() {     
    jQuery(this).parent().next().toggle('slow');  
    return false;          
});             

Answer 2

Глядя на DOM в вашей скрипке, это может быть способ решить:

jQuery('.happening-main-text .readmore').click(function() {     
    jQuery(this).parent().next().toggle('slow'); 
    return false; 
} 

Посмотрите на $.next и $.parent в документах. Кроме того, вы можете заметить, что анимация «прыгающая», это из-за поля на p (related SO question). Это позволит устранить разницу. Например:

p { margin: 0; } 

Answer 3

Кевин, попробуйте пойти по этому пути:

$('.happening-main-text').each(function() { 
    $divmore = $(this).find(".divmore"); 
    $readmore = $(this).find(".readmore"); 
    $readmore.bind("click", {target: $divmore}, function(e) { 
     e.data.target.toggle(); 
    }); 
}); 

Вам необходимо пройти другую цель каждого щелчка обратного вызова из-за структуры вашего HTML. Рефакторинг немного DOM позволит вам использовать $(). Братьев или других более простых решений. Во всяком случае, вы можете посмотреть на рабочей версии вашей скрипку здесь: http://jsfiddle.net/xycCx/6/

Answer 4

Раствор следует (http://jsfiddle.net/4nJWf/):

Примечание: Исправлена ​​ошибка в исходном HTML

HTML

<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 
    </p> 
    <div class="divmore"> 
     <p>more test from hidden1</p> 
    </div> 
</div> 
<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 
    </p> 
    <div class="divmore")"> 
     <p>more test from hidden</p> 
    </div> 
</div> 
<div class="happening-main-text"> 
    <p>part of text goes here part of text <a href="#" class="readmore">show/hide</a> 
    </p> 
    <div class="divmore"> 
     <p>more test from hidden2</p> 
    </div> 
</div> 

JQuery

jQuery('.happening-main-text .readmore').click(function() {     
    $(this).parents('.happening-main-text').children('.divmore').toggle('slow');  
    return false;          
    }); 

Answer 5

Я знаю, что это уже был дан ответ, но это выглядит как скрытый текст в классе divmore не показан в растворе, но вместо этого он скрывает остальную часть happening-main-text класса.

Он должен переключаться только .divmore класса немедленных к щелкнуло <a>, как показано ниже:

$(document).ready(function(){ 
    $(".readmore").click(function(){ 
    $(this).parent("p").siblings("div").toggle("slow");   
    }); 

});

Это мои fiddle