Делать Divs скрытыми по умолчанию в Javascript

Question

Делать Divs скрытыми по умолчанию в Javascript

0

Я просто надеюсь, что мои знания Javascript - это плохая мысль, и я не могу работать над этим.

У меня есть код Javascript, который расширяет контакт при нажатии ссылки, однако в настоящее время контакт видим по умолчанию, и я хочу, чтобы он был скрыт до щелчка ссылки, каких-либо идей?

Jsfiddle: http://jsfiddle.net/p7Ebh/

JS

$("a.box-toggle").on('click', function () {
    $('div.box-content').slideToggle(200).toggleClass('active');
});

HTML

<section class="box2">
<header class="box-head">
    <div class="box-title fr"> <span class="box-icon"></span>

            <h3 class="box-title-text">Title Title</h3>

    </div>  <a class="box-toggle fl active" href="#">A</a>

</header>
<div class="box-content active">
    <img src="http://carryingthegun.files.wordpress.com/2012/09/personal_trollface_hd.png" alt="" width="200" height="200" />Content or collapsing data goes here</div>
</section>

CSS

.widget-toggle {
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    width: 18px;
    height: 9px;
    margin-top: 15px;
    margin-left: 13px;
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
    background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}

Заранее спасибо!

willmadd 31 март 2014, в 16:45

Источник

1

почему бы не скрыть это с помощью css?
Huangism 31 март 2014, в 14:25

Теги:

jquery

css

drop-down-menu

hide

4 ответа

Ещё вопросы

почему бы не скрыть это с помощью css?

Alessandro Minoccheri · Answer 1 · 2014-03-31T13-22-00.000Z

используя .hide() вы можете сделать невидимым содержимое div при загрузке страницы, а затем появляться только тогда, когда пользователь нажимает на ссылку.
попробуй это:

    $('div.box-content').hide();    
    $("a.box-toggle").on('click', function () {
        $('div.box-content').slideToggle(200).toggleClass('active');
    });

DEMO1

Другим решением является использование только CSS без использования .hide() в jQuery следующим образом:

.box-content{
    display:none;
}

demo2

+1 за решение CSS. Стили страниц отрисовываются задолго до того, как DOM будет готов, и WAY до загрузки jQuery. Если у пользователя медленное интернет-соединение, вероятно, он действительно увидит элемент, прежде чем он будет скрыт через jQuery.
да, я предпочитаю использовать css и в этом случае :) @NateKibler

Matthias Schmidt · Answer 2 · 2014-03-31T11-58-00.000Z

вы также можете добавить display:none в .box-content css:

.box-content{
    display:none;
}

Sudharsan S · Answer 3 · 2014-03-31T12-18-00.000Z

использовать.hide() в jquery

 $(".box-content ").hide();

Anoop Joshi · Answer 4 · 2014-03-31T12-08-00.000Z

Почему вы не используете .hide() на document.ready??

$('div.box-content').hide();    
$("a.box-toggle").on('click', function () {
        $('div.box-content').slideToggle(200).toggleClass('active');
    });