jQuery .slideToggle Использование

Question

Я пытаюсь поместить тэг-якорь внутри элемента статьи, к которому прикреплена функция jQuery .slideToggle.

Это HTML:

<section id="recent_articles"> 

<article> 

<img src="images/image1.jpg"> 
<h1>Insert title here</h1> 
<p>Insert text here followed by an anchor tag<a href=#>Read More</a></p> 

</article> 

</section> 

The jQuery looks like this: 

$("#recent_articles > article").click(function(e) { 

     $(this).children("p").slideToggle(1000); 
     $(this).toggleClass("open"); 

    }); 

Я понимаю, что JQuery является «активации» всякий раз, когда статья элемент щелкнул (включая элемент изображения) и пункт скользит вниз и вверх, как указано.

Это означает, что якорный элемент недоступен, поскольку он отвечает на jQuery, а не на атрибут href.

Использование jQuery, как я могу получить доступ к элементу привязки, чтобы он реагировал на поведение по умолчанию, а не функцию .slideToggle.

Я очень ОЧЕНЬ новый при использовании jQuery, поэтому любые советы будут оценены.

Answer 1

На щелчком мыши вы можете посмотреть на event.target элемент (тот, кто назвал это событие) тэгу,
, если это не якорь "A", чем делать то, что

$("#recent_articles > article").click(function(ev) { 
    if(ev.target.tagName!=="A"){ 
    $(this).children("p").slideToggle(1000); 
    $(this).toggleClass("open"); 
    } 
}); 

иначе вы можете сделать это похоже на то, что вы уже добавили еще одну функцию, связанную с элементом a, который будет предотвращать распространение события click ()) до :

$("#recent_articles > article").click(function(e) { 
    $(this).children("p").slideToggle(1000); 
    $(this).toggleClass("open"); 
}).find('a').click(function(e){ // find `a` inside `article` and on click... 
    e.stopPropagation();   // don't propagate the event up to `article` 
}); 

P.S: ваша функция может быть также немного короче, как:

$("#recent_articles > article").click(function(e) { 
    $(this).toggleClass("open").children("p").slideToggle(1000); 
}).find('a').click(function(e){ 
    e.stopPropagation(); 
});