jQuery click/toggle показать/скрыть панели div

Я пытаюсь щелкнуть, чтобы открыть и скрыть некоторые div, используя jQuery. Я почти заработал, всего лишь немного, мне нужна помощь.jQuery click/toggle показать/скрыть панели div

Вот что я получил до сих пор: jsfiddle

$(document).ready(function() { 
     $('#showmenu1').click(function() { 
       $('.menu1').fadeToggle("fast"); 
       $('.menu2').hide(); 
       $('.menu3').hide(); 
       $('#showmenu2').hide(); 
       $('#showmenu3').hide(); 
       $(this).toggleClass('close'); 
     }); 
     $('#showmenu2').click(function() { 
       $('.menu2').fadeToggle("fast"); 
       $('.menu1').hide(); 
       $('.menu3').hide(); 
       $('#showmenu1').hide(); 
       $('#showmenu3').hide(); 
       $(this).toggleClass('close'); 
     }); 
     $('#showmenu3').click(function() { 
       $('.menu3').fadeToggle("fast"); 
       $('.menu1').hide(); 
       $('.menu2').hide(); 
       $('#showmenu1').hide(); 
       $('#showmenu2').hide(); 
       $(this).toggleClass('close'); 
     }); 
    });

Это работает прекрасно, но если нажать на любую из «Ссылка 1», «Ссылка 2» & «Link 3» связывает это показывает правильный показать div и скрывает другие 2 ссылки (что верно). То, что мне тогда нужно сделать, - это если вы затем щелкните на той же панели ссылок, что и скрытые скрытые объекты, но мне также нужны другие 2 панели ссылок для повторного появления. В ту минуту они остаются скрытыми.

Благодаря

источник

2015-08-14 alexgomy

Это, как я это сделал:

$(document).ready(function() { 
    $('#showmenu1').click(function() { 
      $('.menu1').fadeToggle("fast"); 
      $('#showmenu2').toggle(); 
      $('#showmenu3').toggle(); 
      $(this).toggleClass('close'); 
    }); 
    $('#showmenu2').click(function() { 
      $('.menu2').fadeToggle("fast"); 
      $('#showmenu1').toggle(); 
      $('#showmenu3').toggle(); 
      $(this).toggleClass('close'); 
    }); 
    $('#showmenu3').click(function() { 
      $('.menu3').fadeToggle("fast"); 
      $('#showmenu1').toggle(); 
      $('#showmenu2').toggle(); 
      $(this).toggleClass('close'); 
    }); 
});

Here is the JSFiddle demo :)

Использование toggle() вместо hide(), и вам не придется иметь дело с другие меню, когда они не участвуют :)

источник

2015-08-14 12:58:33

Совершенная спасибо. Не уверен, почему я не думал просто использовать toggle вместо hide. – alexgomy

Анимация не выглядит хорошо, когда меню скрывается! –

@UkatJalal [здесь] (http://jsfiddle.net/rzw9fzz2/4/) ur animation flavored :) Также можно использовать 'fadeToggle()' для еще одного вкуса :) –

Может быть, вместо того, чтобы переключаться скрыть остальные:

$(document).ready(function() { 
    $('#showmenu1').click(function() { 
      $('.menu1').fadeToggle("fast"); 
      $('.menu2').hide(); 
      $('.menu3').hide(); 
      $('#showmenu2').toggle(); 
      $('#showmenu3').toggle(); 
      $(this).toggleClass('close'); 
    }); 
    $('#showmenu2').click(function() { 
      $('.menu2').fadeToggle("fast"); 
      $('.menu1').hide(); 
      $('.menu3').hide(); 
      $('#showmenu1').toggle(); 
      $('#showmenu3').toggle(); 
      $(this).toggleClass('close'); 
    }); 
    $('#showmenu3').click(function() { 
      $('.menu3').fadeToggle("fast"); 
      $('.menu1').hide(); 
      $('.menu2').hide(); 
      $('#showmenu1').toggle(); 
      $('#showmenu2').toggle(); 
      $(this).toggleClass('close'); 
    }); 
});

источник

2015-08-14 12:58:04 andrrs

Пожалуйста, проверьте обновленную скрипку: http://jsfiddle.net/rzw9fzz2/2/

$(document).ready(function() { 
    $('#showmenu1').click(function() { 
     $('.menu1').fadeToggle("fast"); 
     $('.menu2').hide(); 
     $('.menu3').hide(); 
     $('#showmenu2').toggle(); 
     $('#showmenu3').toggle(); 
     $(this).toggleClass('close'); 
    }); 
    $('#showmenu2').click(function() { 
     $('.menu2').fadeToggle("fast"); 
     $('.menu1').hide(); 
     $('.menu3').hide(); 
     $('#showmenu1').toggle(); 
     $('#showmenu3').toggle(); 
     $(this).toggleClass('close'); 
    }); 
    $('#showmenu3').click(function() { 
     $('.menu3').fadeToggle("fast"); 
     $('.menu1').hide(); 
     $('.menu2').hide(); 
     $('#showmenu1').toggle(); 
     $('#showmenu2').toggle(); 
     $(this).toggleClass('close'); 
    }); 
});

источник

2015-08-14 13:01:16

Я изменил немного кода. Вы можете найти полезным:

HTML:

<div id="showmenu1" class="panel">Link 1</div> 
<div id="showmenu2" class="panel">Link 2</div> 
<div id="showmenu3" class="panel">Link 3</div> 

<div class="menu1">Link 1 reveal content</div> 
<div class="menu2">Link 2 reveal content</div> 
<div class="menu3">Link 3 reveal content</div>

CSS:

.panel{width:150px;float:left;padding:50px;cursor:pointer;} 
#showmenu1{background:#ffff00;} 
#showmenu2{background:#ff0000;} 
#showmenu3{background:#fAAA00;} 
.menu1, .menu2, .menu3{float:left;background:#000;color:#fff;padding:50px; opacity: 0; display: none} 

.hide-showmenu { 
    display: none; 
} 

.display-menu { 
    display: block; 
} 
.transition-menu { 
    transition: opacity 0.5s linear; 
    opacity: 1; 
}

JS:

$(document).ready(function() { 
     $('#showmenu1').click(function() { 
      $('.menu1').toggleClass("display-menu"); 
      setTimeout(function() { 
       $('.menu1').toggleClass("transition-menu"); 
      }); 
      $("#showmenu2, #showmenu3, .menu2, .menu3").toggleClass("hide-showmenu"); 
      $(this).toggleClass('close'); 
    }); 
     $('#showmenu2').click(function() { 
      $('.menu2').toggleClass("display-menu"); 
      setTimeout(function() { 
       $('.menu2').toggleClass("transition-menu"); 
      }); 
      $("#showmenu1, #showmenu3, .menu1, .menu3").toggleClass("hide-showmenu"); 
      $(this).toggleClass('close'); 
    }); 
     $('#showmenu3').click(function() { 
      $('.menu3').toggleClass("display-menu"); 
      setTimeout(function() { 
       $('.menu3').toggleClass("transition-menu"); 
      }); 
      $("#showmenu1, #showmenu2, .menu1, .menu2").toggleClass("hide-showmenu"); 
      $(this).toggleClass('close'); 
    }); 
});

Fiddle Здесь: http://jsfiddle.net/rzw9fzz2/3/

источник

2015-08-14 13:40:20

jQuery click/toggle показать/скрыть панели div

ответ

Смежные вопросы