Невозможно свернуть div, используя Javascript

Question

Невозможно свернуть div, используя Javascript

0

У меня есть ссылка. Когда эта ссылка щелкнула, тогда покажите содержимое скрытого div. Но проблема в следующий раз, когда мне нужно свернуть div.

Вот мой скрытый DIV

 <div id="divHiddenContainer" style="display: none;">
 <div id="divItem1"> <span">
 </span></div>

Ссылка здесь

<a href="#1" class="aItemLnk" id="a1">Read More</a>

Вот Javascript

<script type="text/javascript">
$(".aItemLnk").click(function () {
    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#divItem" + id).html();

    $('#ajax').html(contentTobeLoaded).fadeIn(100000, function () {
    });
});

TechGuy 27 нояб. 2013, в 20:29

Источник

Теги:

c#

javascript

html

asp.net

4 ответа

1

Вы можете использовать метод toggle для вашего желаемого div внутри события клика гиперссылки.

Я привел пример для вас в этой скрипке> jsfiddle.net/MK68L

Надеюсь, поможет

candeias 27 нояб. 2013, в 22:49

1

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

$(".aItemLnk").click(function () {
    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#divItem" + id).html();

    $('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
    });
});

pquest 27 нояб. 2013, в 17:54

1

Вам нужно условие (if, else), чтобы вызвать fadeIn, когда div скрыт, и fadeOut, когда отображается div!

Потому что ваш код вызывает только fadeIn, поэтому в первый раз он будет fadeIn, а следующий вызов будет также fadeIn, поэтому он останется там.

Я не знаю в JQuery, но как я это делаю в javascript, чтобы узнать, показан ли div или скрыт:

if(div.style.display == 'block') {
} 
    //call fadeOut
else {
    //call fadeIn
}

Shryme 27 нояб. 2013, в 15:58

0

на самом деле не в затухании, я просто хотел скрыть этот div .. Как получить второй клик?
TechGuy 27 нояб. 2013, в 18:51
0

Что вы имеете в виду? если div скрыт, вы хотите показать его, и если он есть, вы хотите его скрыть? А что вы подразумеваете под вторым кликом? вам не нужно беспокоиться об этом, если вы вызываете fadeIn fadeOut в if, elseif.
Shryme 27 нояб. 2013, в 18:56
0

если вы хотите скрыть это без fadeOut, вы можете сделать div.style.display = 'none'; если это твой вопрос
Shryme 27 нояб. 2013, в 18:56

Показать ещё 1 комментарий

Ещё вопросы

на самом деле не в затухании, я просто хотел скрыть этот div .. Как получить второй клик?
Что вы имеете в виду? если div скрыт, вы хотите показать его, и если он есть, вы хотите его скрыть? А что вы подразумеваете под вторым кликом? вам не нужно беспокоиться об этом, если вы вызываете fadeIn fadeOut в if, elseif.
если вы хотите скрыть это без fadeOut, вы можете сделать div.style.display = 'none'; если это твой вопрос

Humpy · Accepted Answer · 2013-11-27T17-51-00.000Z

Вот как я делаю свое.

Javascript

<script type="text/javascript">
 $(function () {
            $('.dragbox')
            .each(function () {
                $(this).hover(function () {
                    $(this).find('h2').addClass('collapse');
                }, function () {
                    $(this).find('h2').removeClass('collapse');
                })
                .find('h2').hover(function () {
                    $(this).find('.configure').css('visibility', 'visible');
                }, function () {
                    $(this).find('.configure').css('visibility', 'hidden');
                })
                .click(function () {
                    $(this).siblings('.dragbox-content').toggle();
                })
                .end()
                .find('.configure').css('visibility', 'hidden');
            });
</script>

HTML

<div class="dragbox" id="Widget2" runat="server">
            <h2 style="font-size: 14pt">Heading Goes Here</h2>
            <div class="dragbox-content">
                //Information Here
            </div>
        </div>

Поэтому, когда вы нажимаете заголовок (h2), он скрывается, и когда вы нажмете на него снова, он будет виден. Вам также понадобится css.. вот моя.

CSS

.column{
    width:49%;
    margin-right:.5%;
    min-height:300px;
    background:#e2e2e2;
    float:left;
}
.column .dragbox{
    margin:5px 2px  20px;
    background:#fff;
    position:relative;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.column .dragbox h2{
    margin:0;
    font-size:12px;
    padding:5px;
    background:#f0f0f0;
    color:#000;
    border-bottom:1px solid #eee;
    font-family:Verdana;
    cursor:move;
}
.dragbox-content{
    background:#fff;
    min-height:100px; margin:5px;
    font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
    background: #f0f0f0;
    border:1px dashed #ddd;
}
.dragbox h2.collapse{
    background:#f0f0f0 url("../Images/collapse.png") no-repeat top right;
}
.dragbox h2 .configure{
    font-size:11px; font-weight:normal;
    margin-right:30px; float:right;
}

Я использую "dragbox" в отсортированном jquery. Итак, как вы можете сказать, вам не нужны столбцы.columns, но я показал им, что вы просто поедете по этому маршруту и хотите использовать div как столбцы. Если вы это сделаете, все, что вам нужно сделать, это добавить

<div class="column" id="column1" runat="server">
</div>

А затем поместите в него "dragbox". Вы можете иметь 2 из этих "столбцов"

Надеюсь это поможет.