Блог

Главная - Вопросы по программированию - Попытка добавить дополнительные функции в javascript (

Попытка добавить дополнительные функции в javascript (

#javascript #css #html #getelementbyid

#javascript #css #HTML #getelementbyid

Вопрос:

К вашему сведению, новичок, здесь мне удалось создать небольшой JavaScript, который выполняет 50% того, что я хочу, в том, что когда я нажимаю на него, он показывает скрытые ссылки. Я хотел бы добавить дополнительные функции при повторном нажатии на главную ссылку, она скроет обнаруженные ссылки. Итак, я думаю, что я пытаюсь сделать, это при первом щелчке изменить состояние скрытого объекта на встроенное, при следующем щелчке изменить отображение обратно на «нет».

 <li><a href="#" onclick="document.getElementById('displayLinks').style.display='inline';" ><i class="fa fa-rocket"></i>amp;nbsp;Studies</a></li>
    <span id="displayLinks" style="display:none;">
        <ul>
            <li><a href="#" class="current"><i class="fa fa-home"></i>amp;nbsp;216</a></li>
            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>amp;nbsp;240</a></li>

            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>amp;nbsp;240 Vids</a></li>
        </ul>
    </span>

Ответ №1:

Вы можете создать toggle функцию, которая переключается между inline и none :

 var toggle = (function() {
    var style = 'inline';
    return function() {
        document.getElementById('displayLinks').style.display=style;
        if (style == 'inline') {
            style = 'none';
        } else {
            style = 'inline';
        }
    }
})();

скрипка

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

1. Переключение? Я бы никогда не догадался об этой идее за миллион лет — спасибо, я пойду и изучу это — спасибо за скрипку.

2. @Chezshire, у jquery уже есть .toggle метод, но поскольку вы его не использовали, я просто использовал базовый js

3. Спасибо — я просто погружаюсь в воды jQuery и javascript, что очень удивительно, но не всегда очевидно, как что-то сделать. Я искал что-то вроде ‘ChangeEvent’, идея о том, что это будет ‘toggle’, никогда не приходила мне в голову. Спасибо за расширение.

Ответ №2:

Попробуйте использовать if else

 <li><a href="#" onclick="if(document.getElementById('displayLinks').style.display == 'none') { document.getElementById('displayLinks').style.display='inline'; } else {document.getElementById('displayLinks').style.display='none';}"><i class="fa fa-rocket"></i>amp;nbsp;Studies</a>

</li> <span id="displayLinks" style="display:none;">
        <ul>
            <li><a href="#" class="current"><i class="fa fa-home"></i>amp;nbsp;216</a></li>
            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>amp;nbsp;240</a></li>

            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>amp;nbsp;240 Vids</a></li>
        </ul>
    </span>

JSFiddle