Javascript toggle hide

Question

Я изучаю javascript, и я пытаюсь переключить простой эффект скрытия и раскрытия, чтобы не повезло. В настоящее время эффект отменяется только нажатием на другой div с той же ссылкой.

Вот мой JavaScript:

var $ = jQuery; 

$(document).ready(function(){ 
    $('.section').hide(); 
}); 

function showMe(num){ 
    $('.section').hide(0); 
    $('#div_one'+num).fadeIn(1000); 

} 

Вот мой CSS:

.height-auto 

{ 
    height:auto; 
} 
.section 

{ 
    width:552px; 
    min-height:300px; 

} 

Вот мой HTML:

<div class="section home-things visible" id="div_one1"> 

     <div class="section-contents"></div> 
    </div> 
</div> 

В идеале, я бы л ike для «javascript: showMe (1)» для переключения «div_one1» и т. д.

Пожалуйста, помогите

Answer 1

Вашего кода, написанная чисто показательной функции. Вы прячете его каждый звонок showMe, а затем показываете его потом.

Что-то вроде следующего может сделать его фактическое тумблер:

function showMe(num) 
{ 
    if ($('#div_one'+num).is(":visible")) 
    { // the div is visible, so we just want to hide it 
     $('#div_one'+num).hide(); 
    } 
    else 
    { // the div is not visible, so hide the rest and show it 
     $('.section').hide(0); 
     $('#div_one'+num).fadeIn(1000); 
    } 

    // I don't know what these next two lines are for, 
    // as your code sample doesn't include them, so leaving as-is :) 
    $('.height-auto').removeClass('height-auto'); 
    $('#strict').addClass('height-auto'); 
} 

Однако JQuery имеет несколько удобных встроенных функций, которые могут сделать его немного короче:

function showMe(num) 
{ 
    $('#div_one'+num).siblings('.section').hide(); 
    $('#div_one'+num).fadeToggle(); 

    // I don't know what these next two lines are for, 
    // as your code sample doesn't include them, so leaving as-is :) 
    $('.height-auto').removeClass('height-auto'); 
    $('#strict').addClass('height-auto'); 
} 

jsFiddle

Answer 2

Я опаздываю, но построил его для вас, так что просто отправьте в качестве ответа

$(document).ready(function(){ 
    $('.section').hide(); 
    $('#div_one1').show(); 
}); 

function showMe(num){ 
    $('.section').hide(); 
    $('#div_one'+num).fadeIn(300); 
} 

DEMO.