Открывать разные ссылки с одинаковой функцией JavaScript

Question

У меня есть небольшая проблема с моим JS. У меня есть несколько ссылок с одним и тем же кликом. Моя проблема заключается в том, что при нажатии на ссылку отображается первый экран.

Мой HTML

<li>
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a>
    <p class="open">
        <a href="#">Portfolio</a>
        <a href="#">Twitter</a>
        <a href="#">Dribbble</a>
    </p>
</li>
<li>
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a>
    <p class="open">
        <a href="#">Portfolio</a>
        <a href="#">Twitter</a>
        <a href="#">Dribbble</a>
    </p>
</li>
<li>
    <a href="#" onclick="openRookie();" class="rookie">John Doe</a>
    <p class="open">
        <a href="#">Portfolio</a>
        <a href="#">Twitter</a>
        <a href="#">Dribbble</a>
    </p>
</li>

Мой JS

var s = document.getElementsByClassName('open');
function openRookie() {
    for(var i=0; i<s.length; i++) {
        if (s[i].style.maxHeight !== "20px") {
            s[i].style.maxHeight = "20px";
            s[i].style.marginTop = "10px";
        } else {
            s[i].style.maxHeight = "0";
            s[i].style.marginTop = "0";
        }
        return false;
    }
}

Спасибо за ваши ответы.

Answer 1

Вы можете повторно использовать ту же функцию, нацелив ее на элемент, вызвавший событие. Затем, используя этот элемент, вы можете получить различные html-узлы, участвующие в событии.

Например, посмотрите это http://jsfiddle.net/65Xxw/1/

function openRookie(){

    // get the anchor which has been clicked.
    var elm = event.target;
    // get the parent node which is the li tag
    var parent = elm.parentNode;
    // get the child of the li tag which is a paragraph. 
    var paragraphs = parent.getElementsByTagName('p');

    // paragraphs is an array. we know there is only one so can just show.
    paragraphs[0].style.display = "block";

    // prevent the link from doing it's natural thing.
    return false;

}

Вы также можете изменить это, чтобы специально искать открытый класс, если вы получили несколько <p> теги в пределах <li>

Answer 2

Вы должны дать <p> что вы хотите показать / скрыть идентификатор, который вы можете достичь, а затем использовать getElementById вместо. Идентификатор должен быть передан в функцию в качестве параметра.