Вопрос

I am having trouble with this set up. When I click the 'Services' link it drops down, but then if I use the same 'Services' link to close the drop down/slide down area, when I reopen it, it doesn't expand/contract to fit the content, the size just freezes, where as if I close it with the 'Close' link that's inside the slide down area, it carries on working fine.

(Click Services, Hover over a link, then click Services again to close it, then again to open it and hover over a link again to show the problem I mean)

jsFiddle for reference

    $(document).ready(function(){
        $("#closebtn").click(function(){
            $(".expandable").stop().slideUp().delay(600);
            $(".expandable2").stop().slideUp().delay(600);
            $("#taglinecontainer").stop().slideToggle({queue: false}).delay(600);
        });
        $("#toggleservices").click(function(){
            $(".expandable").slideUp().delay(600);
            $("#fullservices").stop().slideToggle({queue: false});
            $("#taglinecontainer").stop().slideToggle({}).delay(600);
        });
        $("#togglesectors").click(function(){
            $(".expandable").slideUp().delay(600);
            $("#fullsectors").slideToggle({queue: false});
            $("#taglinecontainer").slideToggle({}).delay(600);
        });
    });
    $(document).ready(function(){
        $("#togglestrategyblurb").hoverIntent(function(){
            $(".expandable2").slideUp();
            $("#strategyblurb").slideToggle();
        }, function(){
        });
        $("#toggledesignblurb").hoverIntent(function(){
            $(".expandable2").slideUp();
            $("#designblurb").slideToggle();
        }, function(){
        });
        $("#toggleprblurb").hoverIntent(function(){
            $(".expandable2").slideUp();
            $("#prblurb").slideToggle();
        }, function(){
        });
        $("#togglewebblurb").hoverIntent(function(){
            $(".expandable2").slideUp();
            $("#webblurb").slideToggle();
        }, function(){
        });
    });
Это было полезно?

Решение

See if this solves your issue: Sample

 $("#toggleservices").click(function(){

    $("#fullservices").stop().slideToggle({queue: false});
    $("#taglinecontainer").stop().slideToggle({}).delay(600);
 });

Другие советы

add overflow to your header

header {
    background: rgba(0, 0, 0, 0.6);
    min-height: 50px;
    overflow:auto;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top