Блог

Главная - Вопросы по программированию - Разборные разделы jQuery

Разборные разделы jQuery

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть следующий HTML .. Я бы хотел скрыть разделитель боковой панели при загрузке и переключать его с помощью разделителя HREF или изображения.. Какой самый простой способ добиться этого? В настоящее время на странице будет отображаться раздел боковой панели, и я могу переключить его с помощью ссылки.. однако я хотел бы изменить ссылку (или изображение) на (открыть / закрыть) в зависимости от состояния..

Найдено множество способов добиться этого с помощью slideup и slidedown .. просто ничего со стороны —

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.left {float: left;}
.right {float: right;}
.hidden {display: none;}

#sidebar {
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar #sidebar {
    display: block;
    width: 20%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}

#separator {
    display: block;
    outline: none;
    width: 10%;
}

</style>
</head>

<body>
<div class="use-sidebar sidebar-at-right" id="main">
    <div id="sidebar">Some HTML Poll Content Here</script></div>
    <a href="" id="separator">SHOW POLL</a>
    <div class="clearer">amp;nbsp;</div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Variables
    var objMain = $('#main');
    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
        objMain.addClass('sidebar-on');
    }
    // Hide sidebar
    function hideSidebar(){
    objMain.removeClass('use-sidebar');
    objMain.addClass('sidebar-off');
    }

    // Sidebar separator
    var objSeparator = $('#separator');
    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight()   'px');
});
</script>
</body>
</html>

Ответ №1:

Эффекты .slide () — это просто краткие обозначения от руки для .animate().

Вы можете просто создать свой собственный:http://jsfiddle.net/rkw79/2dgg8/2 /

Установите свойство ‘left’ за пределами диапазона просмотра, а затем переведите его в режим просмотра по щелчку мыши.

 $('input').toggle(function() {
    $('div').animate({
        left: '0px'
    });
    $(this).val('close');
}, function() {
    $('div').animate({
        left: '-150px'
    });
    $(this).val('open');
});