section标签jquery隐藏显示效果

时间:2015-06-25 07:14:48

标签: javascript jquery html css

我无法让这些部分显示出来,我非常困难,不再知道我做错了什么。我做的最后一次更改,使部分在他们以前使用jquery时停止显示,我在菜单部分编写了一个jquery菜单。我成功编写了jquery菜单,后来发现当我点击链接时,菜单没有隐藏并显示新的部分。我摆弄它认为它只是javascript订单,但我将其更改为不同的订单,问题仍然存在。我不知道你需要知道什么才能找出问题所在,但我会把这些要点放在这里。

这是我正在处理的网站,在菜单中,只有第一个链接编码为jquery,其余的只是主题标签。

<head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp">

<title>Universal Magazine</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo_main.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<!--<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="css/templatemo_misc.css">
<link rel="stylesheet" href="css/menu.css">

</head>

<body>
<div class="container">
    <div class="row">
    <a href="#coupons" class="change-section hovers">
        <div class="fixed-btn visible-md visible-lg">
            <div class="coupons"> 
<!-- this is a button that i coded to the menu-->
                <div class="image">
                </div>
            </div>
        </div>
    </a>
    <a href="#coupons" class="change-section">
        <div class="photo visible-xs visible-sm">
        </div>
    </a>
</div>
</div>
</body>
est compiled and minified JavaScript -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script src="js/jquery.backstretch.min.js"></script>
    <script src="js/menu.js"></script>
    <script src="js/templatemo_script.js"></script>
<!--templatemo_script.js file contents:-->
<script>
    /* 
Zoom Template 
http://www.templatemo.com/preview/templatemo_414_zoom
*/

var menuDisabled = false;

jQuery(function($) {

    $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('#main-wrapper').delay(350).css({'overflow':'visible'});
    });

    $(document).ready( function() {

        loadGoogleMap();

        // backstretch for background image
        var defaultImgSrc = $('img.main-img').attr('src');
        $.backstretch(defaultImgSrc, {speed: 400});

    //for image slide on menu item click(normal) and responsive
    $(".change-section").on('click',function(e){
            e.preventDefault();
            if (menuDisabled == false) // check the menu has disabled?
            {
                menuDisabled = true; // disable to menu

                var name = $(this).attr('href');
                console.log(name);
                // get image url and assign to backstretch for background
                var imgSrc = $("img"+name+"-img").attr('src');
                $.backstretch(imgSrc, {speed: 400}); //backstretch for background fade in/out

                // content zoom in/out
                $("section.active").hide('size',{easing: 'easeInQuart', duration: 400},function(){
                    $(this).removeClass("active");
                    $(name+"-section").show('size',{easing: 'easeOutQuart', duration: 400},function(){
                        $(this).addClass("active");

                        // google map need to resize for animate contents
                        google.maps.event.trigger(map, 'resize'); // resize map
                        $.backstretch("resize"); // resize the background image
                        menuDisabled = false;
                     });
                });                
            }
            return;
    });

    });

});

var map = '';

function initialize() {
    var mapOptions = {
      zoom: 14,
      center: new google.maps.LatLng(16.8496189,96.1288854)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);
}

function loadGoogleMap(){
    // load google map
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=initialize';
    document.body.appendChild(script);
}
</script>
<!--jquery menu settings-->
<script type="text/javascript">
        $(function() {
            /**
            * for each menu element, on mouseenter, 
            * we enlarge the image, and show both sdt_active span and 
            * sdt_wrap span. If the element has a sub menu (sdt_box),
            * then we slide it - if the element is the last one in the menu
            * we slide it to the left, otherwise to the right
            */
            $('#sdt_menu > li').bind('mouseenter',function(){
                var $elem = $(this);
                $elem.find('img')
                     .stop(true)
                     .animate({
                        'width':'170px',
                        'height':'170px',
                        'left':'0px'
                     },400,'easeOutBack')
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'140px'},500,'easeOutBack')
                     .andSelf()
                     .find('.sdt_active')
                     .stop(true)
                     .animate({'height':'170px'},300,function(){
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length){
                        var left = '170px';
                        if($elem.parent().children().length == $elem.index()+1)
                            left = '-170px';
                        $sub_menu.show().animate({'left':left},200);
                    }   
                });
            }).bind('mouseleave',function(){
                var $elem = $(this);
                var $sub_menu = $elem.find('.sdt_box');
                if($sub_menu.length)
                    $sub_menu.hide().css('left','0px');

                $elem.find('.sdt_active')
                     .stop(true)
                     .animate({'height':'0px'},300)
                     .andSelf().find('img')
                     .stop(true)
                     .animate({
                        'width':'0px',
                        'height':'0px',
                        'left':'85px'},400)
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({'top':'25px'},500);
            });
        });
    </script>

0 个答案:

没有答案