Показать / Скрыть Div в JQuery

Question

Показать / Скрыть Div в JQuery

0

У меня есть этот JSFiddle для справки: http://jsfiddle.net/422MP/38/

Зеленые прямоугольники плавают справа, поэтому я хочу, чтобы они показывали, когда расширяется его родительский div. Если щелкнуть другой div, я хочу, чтобы предыдущий div зеленый ящик скрылся, и новый div, чтобы показать. Есть идеи по этому поводу? Вот js:

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400);
    else
        $(this).animate({width: 50}, 400);
});

user3363042 04 март 2014, в 04:54

Источник

Теги:

javascript

jquery

html

css

5 ответов

Ещё вопросы

Arun P Johny · Answer 1 · 2014-03-04T01-02-00.000Z

Постарайтесь установить его с помощью абсолютного положения

.inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left: 100px;
}
.sidebar {
    height: 300px;
    width: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* left: 565px;*/
    /*position: relative;i*/
    margin:0 0px 0 10px;
}

Демо: скрипка

Sarath · Answer 2 · 2014-03-04T02-11-00.000Z

Сначала скройте все внутренние div и покажите ребенку внутреннюю текущую боковую панель

Добавьте двойные строки кода с помощью js

$('.sidebar').on('click', function() {

$ ( "внутренний". ) скрывать(). $ (это).children( 'внутренний'.) шоу().

$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50)
    $(this).animate({width: 150}, 400);
else
    $(this).animate({width: 50}, 400);

});

Tyler.z.yang · Answer 3 · 2014-03-04T01-44-00.000Z

CSS:

.inner{display:none;}

JavaScript:

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(".inner").fadeOut();
        $(this).children(".inner").fadeIn();
    }
    else{   
        $(this).animate({width: 50}, 400);
        $(".inner").hide();
    }        
});

Nisam · Answer 4 · 2014-03-04T01-39-00.000Z

Попробуйте это

$('.inner').hide();
$('.sidebar').on('click', function() {
    $('.inner').hide();
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(this).find('.inner').show();
    }
    else{
        $(this).animate({width: 50}, 400);
    }
});

Посмотрите скрипку

SomeShinyObject · Answer 5 · 2014-03-04T00-50-00.000Z

Почему бы не добавить display: none для определения внутреннего класса, а затем сделать что-то вроде этого с помощью jQuery:

$('.sidebar').on('click', function() {
    //$('.sidebar').animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400).children(".inner").show();
    else
        $(this).animate({width: 50}, 400).children(".inner").hide();
});

jsFiddle