Как они делают выпадающий аккордеонный стиль на следующем сайте?

Question

Я смотрел на http://www.zenfolio.com/zf/features.aspx и не могу понять, как они делают аккордеонный стиль, разворачиваясь и сворачиваясь при нажатии на оранжевые ссылки. Я использовал надстройку панели инструментов для веб-разработчиков для Firefox, но мне не удалось найти в исходном коде ничего такого, как JavaScript, который бы делал следующее. Если кто-нибудь знает, как они это делают, это было бы очень полезно.

Это на самом деле не имеет отношения, но если все ваши ответы будут хорошими, кому я тоже дам ответ?

Answer 1

Они устанавливают свойство CSS .display во внутреннем DIV с 'none' на '', что делает его визуальным.

Это немного сложно, так как JS, кажется, здесь, что делает это:

http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js

Но в основном так все и делают. Это где-то там.

РЕДАКТИРОВАТЬ: Вот оно, похоже:

//... (bunch of junk)
 zf_Features.prototype._entry_onclick = function(e, index) 
{
    var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;
    while (cellNode.tagName != "TD") cellNode = cellNode.parentNode; 
    if (this._current != null) this.dom(this._current).className = "desc";
    if ("i" + index != this._current) 
    {
        cellNode.className = "desc open";
        cellNode.id = this.id + "-i" + index;
        this._current = "i" + index;
    } 
    else this._current = null;
    zf_frame.recalcLayout();
    return false;
};

По сути, то, что они делают, - это действительно окольный и запутанный способ сделать div внутри TD с классом "desc" вместо класса "desc open", который раскрывает его содержимое. Так что это действительно тупой окольный способ сделать то же самое, что и все остальные (то есть обработать нажатие кнопки мыши, чтобы изменить свойство display скрытого div на non-hidden).

РЕДАКТИРОВАТЬ 2:

lol, пока я пытался его отформатировать, другие тоже его нашли. =) Ты быстрее меня;)

Answer 2

Используя jQuery , этот эффект можно построить очень легко :

$('.titleToggle').click(function() {
    $(this).next().toggle();
});

Если вы выполните этот код при загрузке страницы, он будет работать с любой разметкой, которая выглядит следующим образом:

<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>

Обратите внимание, что этот код будет работать для любого количества элементов, поэтому даже для всей таблицы / списка, полного этих элементов, код JavaScript не должен быть повторен или адаптирован любым способом. Имена тегов (здесь span и div) также не имеют значения. Используйте то, что вам больше подходит.

Answer 3

Это делается с помощью JavaScript.

Когда вы нажимаете на ссылку, класс родительского td изменяется с «desc» на «desc open». По сути, расширенный текст всегда есть, но скрыт (display: none;). Когда он получает класс css 'open', текст больше не скрыт (display: block;).

Если вы заглянете в файл sitehome.js и sitehome.css, вы сможете понять, как они это делают.

Кстати, я использовал FireBug, чтобы получить эту информацию. Несмотря на то, что в панели инструментов веб-разработчика есть дублирование некоторых функций, его стоит установить.

Answer 4

Они используют JavaScript. Вы тоже можете сделать это:

<div id="feature">
    <a href="javascript:toggle();">Feature Name</a>

    <div id="desc" style=="display:none;">
     description here...
    </div>
</div>

<script type="text/javascript">
function toggle()
{
   var el=document.getElementById('desc');
   if (el.style.display=='none')
      el.style.display='block'; //show if currently hidden
   else
      el.style.display='none'; //Hide if currently displayed
}
</script>

Приведенная выше функция может быть написана с использованием Jquery для плавного увеличения / уменьшения анимации при отображении / расширении описаний. Он также получил эффект SlideUp и Slidedown.

Answer 5

К сожалению, их код встроен и труден для чтения (http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js),, но это выглядит довольно просто для реализации ... что-то вроде этого (с использованием prototypejs):

<script>
var showHide = {
    cachedExpandable: null
    ,init: function() {
        var containers = $$(".container"); 
        for(var i=0, clickable; i<containers.length; i++) {
            clickable = containers[i].getElementsByClassName("clickable")[0];
            Event.observe(clickable, "click", function(e) {
                Event.stop(e);
                showHide.doIt(containers[i]);
            });
        }
    }
    ,doIt: function(container) {
        if(this.cachedExpandable) this.cachedExpandable.hide();
        var expandable = container.getElementsByClassName("expandable")[0];
        if(expandable.style.display == "none") {
            expandable.show();
        } else {
            expandable.hide();
        }
        this.cachedExpandable = expandable;
    }

};

window.onload = function() {
    showHide.init();
};
</script>

<div class="container">
    <div class="clickable">
        Storage Space
    </div>
    <div class="expandable" style="display: none;">
        Description for storage space
    </div>
</div>

<div class="container">
    <div class="clickable">
        Galleries
    </div>
    <div class="expandable" style="display: none;">
        Description for galleries
    </div>
</div>

Он также кэширует ранее расширяемый элемент, поэтому он скрывает его при нажатии на новый.

Answer 6

Сценарий здесь .

Соответствующий раздел, кажется (перекомпонован):

// This script seems over-complicated... I wouldn't recommend it!

zf_Features.prototype._init = function()
{
    // Get a list of the H3 elements
    var nodeList = this.dom().getElementsByTagName("H3");

    // For each one... 
    for (var i = 0; i < nodeList.length; i++)
    {
        // ... set the onclick to be the function below
        var onclick = this.eventHandler(this._entry_onclick, i);

        // Get the first <a> within the H3 and do the same
        var node = nodeList[i].getElementsByTagName("A")[0];
        node.href = "#";
        node.onclick = onclick;

        // And again for the first <span>
        node = nodeList[i].getElementsByTagName("SPAN")[0];
        node.onclick = onclick;
    }
};

zf_Features.prototype._entry_onclick = function(e, index)
{
    // Get the parent node of the cell that was clicked on
    var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;

    // Keep going up the DOM tree until we find a <td>
    while (cellNode.tagName != "TD")
        cellNode = cellNode.parentNode;

    // Collapse the currently open section if there is one
    if (this._current != null)
        this.dom(this._current).className = "desc";

    if ("i" + index != this._current)
    {
        // Open the section we clicked on by changing its class
        cellNode.className = "desc open";
        cellNode.id = this.id + "-i" + index;

        // Record this as the current one so we can close it later
        this._current = "i" + index;
    }
    else
        this._current = null;

    // ???
    zf_frame.recalcLayout();

    return false;
};

Редактировать: добавлено несколько комментариев

Answer 7

Существует много запутанных / минимизированных JS в их основной JS-версии. Похоже, они очищают DOM, ищут H3 и проверяют ячейки таблицы с помощью класса desc, а затем обрабатывают теги A. (или какой-то другой порядок, возможно) и затем динамическое добавление обработчиков onclick.

if (this._current != null) this.dom(this._current).className
= "desc"; if ("i" + index != this._current) { cellNode.className = "desc open"; cellNode.id = this.id
+ "-i" + index; this._current = "i" + index; }

http://www.zenfolio.com/zf/script/en-US/safari3/windows/5AN2EHZJSZSGS/sitehome.js