Question

我有一个包含3个h1标签的页面3个img标签和3个p标签从头开始，每个p标签都设置为display：none; 我希望当我单击h1标签以展开（切换）img后面的p时。这是我的代码：

<!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/

Answer 1

只需将您的js修改为：

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

请检查demo。

Answer 2

在所有情况下，p之后您没有img元素。我使用了.nextAll()：

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

fiddle

img之后的段落不会扩大

2 个答案: