Параграф после img не будет расширяться

У меня есть страница с 3 h1 тегами 3 img-теги и 3 p-теги С самого начала каждый p-тэг установлен для отображения: none; Я хочу, когда я нажимаю тег h1, чтобы развернуть (переключить) p, который следует за img. Это мой код:Параграф после img не будет расширяться

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
    *{text-align: center; 
     padding: 10px; 
     color: orange; 

     font-family:Georgia; 
     } 
    img{ 
     display: inline-block; 
     margin: auto; 
     border:2px solid black; 
     border-radius: 21px 0px 21px 0px; 
     background-color: black; 

    } 
    body{ 
     background-color: brown; 
    } 
    p{ 
     display: none; 
     font-size: 24px; 
    } 
    h1:hover{ 
     background-color: black; 
    } 
    h1{ 
     border:2px solid blue; 
     border-radius:5px; 
    } 
#top{box-shadow: 10px 10px 5px #888888; 
    padding: 20px; 
    display: inline-block; 
    border-radius: 5px; 
    border: 2px double #6495ED; 
    background-color: #BCD2EE; 
    height: 50px; 
    width: 120px; 
    margin: auto; 
    text-align: center; 
    color: black; 
    font-weight: bold; 
} 

#click{ 
    color: #eed5ad; 
    border:0px; 
} 
#click:hover{background-color: transparent;} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(
    function(){ 
     $("h1").click(
      function(){ 
       $("> img >p",this).show(); 
      }); 
    }); 

</script> 
    <title>Αξιοθέατα</title> 
</head> 
<body> 
<h1 id="click">Κάντε κλικ σε έναν νομό</h1> 
<img src="http://www.golden-greece.gr/maps/kriti.jpg" usemap="#nomoi"> 
<map name="nomoi"> 
    <area shape="poly" coords="184,99,168,154,5,126,13,2,201,10," href="http://www.chania.gr/" alt="xania" target="new"> 
    <area shape="poly" coords="320,83,268,176,176,150,188,101,319,85,," href="http://www.rethimno.gr/" alt="rethimno" target="new"> 
    <area shape="poly" coords="448,117,432,140,464,201,281,227,271,179,273,172,287,166,293,144,305,150,320,132,315,118,324,88,330,81,351,91,444,117," href="http://www.heraklion.gr/" alt="heraklion" target="new"> 
    <area shape="poly" coords="632,115,631,195,467,204,450,118,509,104,539,149,569,138,629,115," href="http://www.lasithinews.gr/" alt="lasithi" target="new"> 
</map> 
<h1>Ελούντα</h1><br> 
<img src="http://says.gr/wp-content/uploads/2013/03/%CE%B5%CE%BB%CE%BF%CF%85%CE%BD%CF%84%CE%B1%CE%842.jpg" alt="Ελούντα" height="60%" width="60%"> 
<p> 
    Η Ελούντα είναι ένα ψαροχώρι του νομού Λασιθίου στην βόρεια ακτή του νησιού της Κρήτης που αποτελεί μέρος του του Άγίου Νικολάου . Είναι παραθαλάσσιος και δημοφιλής τουριστικός προορισμός. Σε μεγάλο βαθμό την επισκέπτονται VIPs για τα παραθαλάσσια θέρετρα πολυτελείας . Απέναντι της βρίσκεται ένα νησί πόλυ μικρό που ονομάζεται Σπιναλόγκα που περικλείεται βόρεια από τον κόλπο της Ελούντας . Ο δρόμος πρός την Ελούντα από τον Άγιο Νικόλαο βρίσκεται περίπου 12 χιλιόμετρα σε μήκος ακολουθόντας την ακτή , καθώς ανεβαίνει προς την κορυφή ενός μικρού βουνού . Το μικρό χώριο της Πλάκας (Λασίθι) , με θέα το νησί της Σπιναλόγκας απέχει μόλις 5 χλμ. από την κεντρική πλατεία της Ελούντας κατευθυνόμενοι βόρεια μακριά από τον Άγιο Νικόλαο . Οι κάτοικοι της ζούσαν τις οικογένειές τους από τη γεωργία, το ψάρεμα, την παραγωγή αλατιού στις ενετικές αλυκές και την εξόρυξη της ακονόπετρας. 
</p> 
<h1>Ιστορία</h1> 
<p> 
    Στην Ελούντα οι πρώτες καταγράφες οικισμού ήταν η αρχαία πόλη της Ολούς της οποίας οι κάτοικοι ήταν σε σύγκρουση με τους κατοίκους της Ντοριαν Λατώ . Το μεγαλύτερο μέρος της Ολούς ήταν αναγεννημένο από την θάλασσα και είναι ακόμη ορατά τα σημάδια κατά την κατάδυση στον κόλπο της Ελούντας. Άπο τις αρχές του 1900 έφευγαν άπο το λιμανάκι βαρκούλες που μετέφεραν τους λεπρούς στην κατοικία της Σπιναλόγκας . 
</p> 
<a href="#click"> 
<div id="top"> 
    Κορυφή 
</div></a> 

</body> 
</html>

Можете ли вы мне помочь? Вот jsfiddle: http://jsfiddle.net/kounelios13/2f0nnsnn/

источник

2014-11-04 Anonymous

обеспечивают jsfiddle –

@jQueryAngryBird Все, что вам нужно, это выше. Это правильный способ задать вопрос. – Archer

Можете ли вы изменить html вообще? Было бы намного, намного чище, если бы вы могли поместить каждую «секцию» (заголовок, изображение, параграф) в отдельные контейнеры, такие как div. – Archer

Просто измените ваши JS быть похожим:

$(document).ready(function(){ 
    $("h1").click(function(){ 
     $(this).nextAll('p').eq(0).toggle(); 
    }); 
});

Проверьте demo, пожалуйста.

источник

2014-11-04 12:18:09 CmajSmith

Спасибо сделал трюк –

У вас нет p элемент после img во всех случаях. Я использовал .nextAll():

$("h1").click(function() { 
    $(this).nextAll("p:first").toggle(); 
});

fiddle

источник

2014-11-04 12:19:09

Даже не работает –

проверить скрипку. по какой-то причине он не работает в снайпере. Также приветствуется. –

Вы правы. Я не проверял jsfiddle, прежде чем комментировать –

Параграф после img не будет расширяться

ответ

Смежные вопросы