Блог

Главная - Вопросы по программированию - Показать / скрыть, чтобы работать как аккордеон

Показать / скрыть, чтобы работать как аккордеон

#javascript #html #dojo

#javascript #HTML #dojo

Вопрос:

Я пытаюсь запустить код, чтобы щелкнуть ссылку и открыть div. Если я нажму на другую ссылку, приведенная выше ссылка должна закрыться. Выбранный должен быть один.

Я не могу использовать jquery или что-либо еще, кроме javascript или dojo. Я не знаю dojo, но javascript.

Я пытаюсь сделать это следующим образом:

 <ul id="sm">
    <li><a href="javascript:void(0);" onclick="toggle_visibility('s');">abc</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sa');">xyz</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('ss');">def</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sd');">efg</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sfd');">Ter</a></li>
</ul>

Код JS, который я использую 

 function toggle_visibility(id) {
    var e = document.getElementById(id);
    e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

Предоставление Div в виде: 

 <div id="s" style="display:none"></div>
<div id="sa" style="display:none"></div>
<div id="ss" style="display:none"></div>

они перекрываются, как только я нажимаю на них

Комментарии:

1. Есть ли конкретная причина, по которой вы не можете использовать jQuery? Потому что это было бы невероятно просто с jQuery.

2. Какой div? Какие у вас проблемы? В чем собственно вопрос?

3. jquery не поддерживается клиентом, он хочет использовать либо dojo, либо javascript plain

4. отредактировал вопрос, чтобы добавить divs

5. Хорошо, вы добавили divs, но где divs по отношению к коду для позиций?

Ответ №1:

Пожалуйста, попробуйте следующий пример. Я надеюсь, что это поможет вам …..:)

 <html>
<head>
<style>
.head {
    border:1px solid #666;
    background-color:#f0f0f0;
    padding:3px;
    cursor:pointer;
}
.content {
    border:1px solid #666;
    background-color:#fff;
    height:100px;
    padding:3px;
}
</style>
<script type="text/javascript">
function hideShoowTab(ctb) {
    var ptb = document.getElementById("ptbname").value
    if(document.getElementById("ptbname").value=="") {
        document.getElementById("content" ctb).style.display="block";
    }
    else if(ptb==ctb) {
        if(document.getElementById("content" ctb).style.display=="block") {
            document.getElementById("content" ctb).style.display="none";
        }
        else {
            document.getElementById("content" ctb).style.display="block";
        }
    }
    else {
        document.getElementById("content" ptb).style.display="none";
        document.getElementById("content" ctb).style.display="block";
    }
    document.getElementById("ptbname").value=ctb;
}
</script>
</head>
<body>
    <div>
        <div id="head1" class="head" onclick="hideShoowTab('1')">Head 1</div>
        <div id="content1" class="content">Content 1</div>
    </div>
    <div>
        <div id="head2" class="head" onclick="hideShoowTab('2')">Head 2</div>
        <div id="content2" class="content" style="display:none;">Content 2</div>
    </div>
    <div>
        <div id="head3" class="head" onclick="hideShoowTab('3')">Head 3</div>
        <div id="content3" class="content" style="display:none;">Content 3</div>
    </div>
    <input type="hidden" id="ptbname" name="ptbname" value="1" />
</body>
</html>

Комментарии:

1. Я не проверял ваш ответ, но не могли бы вы дать некоторые объяснения относительно того, почему это работает? (Предполагая, что это так). Код полезен, только если он понятен.

2. Приведенный выше пример очень легко понять. Вы просто отмечаете каждый идентификатор div, параметр, который передается при вызове функции javascript в событии onclick, а также отмечаете логику функции javascript. Чтобы протестировать приведенный выше пример, просто скопируйте код и поместите его в пустой блокнот, а затем сохраните файл с расширением .html и запустите его в любом браузере.

3. Я хорошо знаю, как тестировать указанный код, и мой запрос был не для меня, а для того, чтобы следовать рекомендациям сайта. Например, смотрите этот пост Джона Скита (одного из ведущих пользователей этого сайта): msmvps.com/blogs/jon_skeet/archive/2009/02/17/… Обратите особое внимание на эту строку: «Однако код без объяснения редко бывает полезным. По крайней мере, приведите одно или два предложения, чтобы объяснить, что происходит.»

4. Хорошо, спасибо, Эйвери. Я понял это и пытаюсь следовать вашему предложению.