21

Re: javascript у файлі.php

Олексій написав:

беріть елемент вище кнопки.

Як?)

https://imagecdn3.luxnet.ua/tv24/resources/photos/news/201801/909592_2042295.gif

Можете зробити як тут :
Для дерева DOM

[class='list']
│
├─── div[id='ref1']
│    │
│    ├─── *
│    ├─── a[href='#ref1']
│    ├─── a[href='#']
│    ├─── *
│    ...
│
├─── div[id='ref2']
│    │
│    ├─── *
│    ├─── a[href='#ref2']
│    ├─── a[href='#']
│    ├─── *
│    ...
│
...

HTML

<div class="list">
    <div id="ref1">
        <p>Some text 1</p>
        <a href="#ref1">Show 1</a>
        <a href="#">Hide 1</a>
        <p>More text 1</p>
    </div>
    <div id="ref2">
        <p>Some text 2</p>
        <a href="#ref2">Show 2</a>
        <a href="#">Hide 2</a>
        <p>More text 2</p>
    </div>
    <!-- ... -->
</div>

CSS

.list>div {
    display: inline-block;
    padding: 0 1em;
    margin: 0.5em auto;
    vertical-align: top;
}
.list>div>* {
    display: block;
    margin: 1em 0;
}
.list>div>a[href^="#"]~*,
.list>div:target>a[href^="#"] {
    display: none;
}
.list,
.list>div:target>a[href^="#"]~* {
    display: block;
}

JS

function setAttributeForAllElementsAfterSpecified(element, attrName, attrValue) {
    while(element = element.nextElementSibling)
        element.setAttribute(attrName, attrValue);
};
function toggle(element) {
    if(element.getAttribute("href").charAt(0) !== "#")
        return true;
    var style = element.getAttribute("style");
    if(style === "display:none;") {
        element.setAttribute("style", "display:block;");
        setAttributeForAllElementsAfterSpecified(element, "style", "display:none;");
    }
    else {
        element.setAttribute("style", "display:none;");
        setAttributeForAllElementsAfterSpecified(element, "style", "display:block;");
    }
    return false;
};
document.addEventListener("DOMContentLoaded", function(event) {
    var anchorsSnapshot = document.evaluate(
        "//*[contains(@class,\'list\')]/div/a[starts-with(@href,\'#\')][1]",
        document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    for (var i = 0; i < anchorsSnapshot.snapshotLength; i++) {
        var anchor = anchorsSnapshot.snapshotItem(i);
        anchor.setAttribute("onclick", "toggle(this)");
        anchor.nextElementSibling.setAttribute("onclick", "toggle(this.previousElementSibling)");
    }
});

Така структура документа хороша тим, що її легко змінювати і сторінка буде працювати навіть тоді, коли JavaScript виключений.

Завантажте прикріплений архів ("index.7z"), розпакуйте документ ("index.html"), відкрийте в браузері, подивіться як він працює, і якщо це те що вам потрібно, то застовуйте ці CSS і JS до свого коду.
Якщо виникнуть питання про це
"//*[contains(@class,\'list\')]/div/a[starts-with(@href,\'#\')][1]"
, то це XPath, тут все розписано.

Post's attachments

index.7z 1.12 kb, 228 downloads since 2018-07-21 

Подякували: morgot1