Как показать div, скрытый css при нажатии кнопки

Question

Я довольно новичок в Jquery, и я хочу, чтобы у меня был скрытый div css: display:none, и после нажатия кнопки $(..).slideDown запустится, и div покажет свои значения. Я попробовал это.

<style> .hidden-div{ display:none } </style>

<div class="hidden-div"> You can't see me </div>

<button onclick="show-div()"> Show Above Div </button>


<script>

    function show-div(){

        $('.hidden-div').slideDown('fast');
        // more stuff...
    }
</script>

Это действительно не сдвигает его должным образом, поскольку оно перекрывает все остальное? Также я попытался бы просто установить class="hidden-div" на class="display-div", но тогда анимация слайда не может быть выполнена.

Теперь я мог бы сказать $('hidden-div').hide() сразу после div и удалить css в целом, но это создает эту проблему, когда я вижу div, а затем он скрывается, его вещь всего в 0.5sec в начале загрузки страницы, но ее внешний вид плохой.

Так кто-нибудь знает решение?

---

Нашел решение своей проблемы .. </p> <pre><code>//rehide the div, not sure why, but it works. $('.hidden-div').hide(); //change class so it no longer display:none //but it will not show the div as .hide() was execute above. $('.hidden-div').attr('class','showing-div'); //Slide it down and everything works. $('.hidden-div').slideDown('fast'); //this can be done in 1 liner. (thank you, Mohsen for chaining explanation) $('.hidden-div').hide().attr('class','showing-div').slideDown('fast');

Надеюсь, это полезно для кого-то еще.

Answer 1

лучше использовать стандартный javascript и указывать на этот div с идентификатором

<style> .hidden-div{ display:none } </style>

<div class="hidden-div" id="hidden-div"> You can't see me </div>

<button onclick="getElementById('hidden-div').style.display = 'block'"> Show Above Div </button>

Answer 2

1. связывать события через jQuery, не использовать встроенный метод JavaScript
2. jQuery SlideDown метод не предназначен для удаления элемента. Вы можете использовать hide или fadeOut
3. Кстати, если вы хотите получить эффект скольжения вниз, а затем скрыть элемент, вы можете связать два метода.
4. Для предотвращения наложения вам нужно использовать CSS. Вы можете использовать position:absolute или дать определенный height родительскому элементу.

Чтобы иметь эффект скольжения и затухания, а также привязку события с помощью не встроенного кода, вы можете использовать этот код:

$('button').bind('click', function(){
$('.hidden-div').slideDown(500).fadeOut(1000); //500ms slide down and 1s fade out
})

Удалите это disply:none из класса hidden-div.

Answer 3

В вашем javascript сначала удалите класс «hidden-div», используя функцию jQuery removeClass ().Посмотрим, поможет ли это ...

Answer 4

$('.hidden-div').show('fast');

Попробуйте использовать <и> вместо [и], и отформатируйте все правильно?