Показать / Скрыть div с кнопкой

0

У меня есть страница HTML с кнопкой, при нажатии которой скрывается скрытый контент. Я использую код jquery, который я вложил в мою HTML-страницу. Когда я нажимаю кнопку, чтобы отображать содержимое в скрытом div, это работает, однако, когда я снова нажимаю кнопку, чтобы скрыть содержимое, ничего не происходит. Если бы кто-нибудь мог мне помочь, это было бы здорово. Также как я могу настроить таргетинг на несколько кнопок. Могу ли я вставить один и тот же код jquery и назовите его "2", а затем "3" и так далее? Любые рабочие примеры были бы замечательными. Вот мой код:

HTML:

<head>
    <script>
        $(document).ready(function() {
            $("#spoiler1").hide();

            $("#button1").click(function() {
                $("#spoiler1").show(300);
            });
        });
    </script>
</head>

<button id="button1">Adventurer &#x25BC;</button>

<div id="spoiler1" style="display:none">
    <p>1. Climb a tree<input type="checkbox" /></p>
    <p>2. Roll down a really big hill<input type="checkbox" ></p>
    <p>3. Camp out in the wild<input type="checkbox" ></p>
    <p>4. Build a den<input type="checkbox" ></p>
    <p>5. Skim a stone<input type="checkbox" ></p>
</div>

Заранее благодарим за любую помощь или совет.

  • 0
    msgstr "однако, когда я снова нажимаю кнопку, чтобы скрыть содержимое, ничего не происходит" . Зачем это? Все, что делает ваш код - показывает div при клике.
Теги:

4 ответа

0
Лучший ответ
$(document).ready(function(){
    $("#spoiler1").hide();
$("#button1").click(function(){
    if($("#spoiler1").is(':visible')){
       $("#spoiler1").slideUp(300);
       }
       else
       {
       $("#spoiler1").slideDown(300);
       }
});
});

Демо - версия:

http://jsfiddle.net/YvUDV/

Поделиться
5

.toggle() этого используйте .toggle()

$(document).ready(function () {
    $("#spoiler1").hide();

    $("#button1").click(function () {
        $("#spoiler1").toggle('slow');
    });
});

демонстрация

Обновить

И идея о том, что у меня есть несколько кнопок, я придумал подход, который вы должны попробовать, использовать classes вместо IDs для кнопок и предоставить один и тот же ID для divs которые вы хотите переключить. Это может занять некоторые проблемы с дизайном, но вы можете управлять, и это всего лишь базовое руководство для продвижения вперед.

Поскольку Markup слишком длинный для mutiple div, поэтому я отправляю сообщения только.

JQuery

$(document).ready(function () {
    $(".category").click(function () {
        $(".show").hide();
        var divToShow = $(this).text().split(" ")[0];
        $("#" + divToShow).toggle('slow');
    });
});

Обновленный скрипт

Поделиться
  • 0
    Я думаю, что Chrome имеет проблемы с hide () и show (). Вам нужно будет использовать $ (селектор) .css ('display', 'none'), чтобы скрыть, и .css ('display', 'block'), чтобы показать.
  • 0
    @MarloC Chrome не имеет ничего общего с hide() и show() , он будет отлично работать с любым браузером!
Показать ещё 3 комментария
0

Вместо этого используйте toggle:

$('#button1').bind("click",function(){
    $("#spoiler1").toggle("fast");
});
Поделиться
0

Что касается события с несколькими кнопками. Назначьте имя класса кнопке, чтобы вы могли выбирать по классу.

$('button.toggle-div').click(function(){...});

Что касается переключения видимости, существует несколько способов.

  1. Используйте toggle() в jQuery. (самый очевидный выбор, но на практике мы могли бы также...)

  2. Используйте toggleClass() ссылку, чтобы добавить/удалить класс, который имеет display:none правило CSS. (более гибкие, вы можете переключать другие стили CSS, такие как цвет шрифта, фон и т.д.).

  3. Используйте некоторые двунаправленные библиотеки JavaScript, такие как knockoutjs или угловые. (Вероятно, избыток для небольшого приложения, но это определенно уменьшит количество кодирования, если оно крупномасштабное.)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню