0
まず最初に、私は他のテーマを使用し、ブートストラップモーダルと折りたたみを入れましたが、動作していません。リンク： Click on here for see what is problem i got.!!!ブートストラップ：モーダルと折りたたみが動作しない
[検索]アイコンをクリックしても、崩壊が追加されましたが、機能しません。事前に感謝してください。ここで
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Climate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,400italic,700italic|Merriweather:300,400italic,300italic,400,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icons.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="css/simple-line-icons.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="fh5co-container">
<div class="js-sticky">
<div class="fh5co-main-nav">
<div class="container-fluid">
<div class="fh5co-menu-1 col-sm-9">
<ul>
<li><a href="#" data-nav-section="home">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-bullseye" aria-hidden="true"></i> Observatory</a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Objectives</a></li>
<li><a href="#"><i class="fa fa-database" aria-hidden="true"></i> Components</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Data <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu-dropdown">
<li><a href="#"><i class="fa fa-line-chart" aria-hidden="true"></i> Tools</a></li>
<li><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Data Access</a></li>
<li><a href="#"><i class="fa fa-file-text-o" aria-hidden="true"></i> Local Climate Data</a></li>
<li><a href="#"><i class="fa fa-soundcloud" aria-hidden="true"></i> Regional Climate Data</a></li>
</ul>
</li>
<li><a href="#">Weather Forecasting</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Education Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="fh5co-menu-2 col-sm-3">
<button class="header-login" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<select class="selectpicker" data-width="fit">
<option data-content='<span class="flag-icon flag-icon-es"></span>'></option>
<option data-content='<span class="flag-icon flag-icon-gb"></span>'></option>
</select>
<button class="search-icon" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="images/search-icon.png"></button>
<div class="collapse" id="collapseExample">
<div class="well">
...............Search Area Text will be here...............
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fh5co-home" class="js-fullheight" data-section="home">
<div class="flexslider">
<div class="fh5co-text">
<div class="container">
<div class="row">
<h1 class="to-animate"><a href="#"><img src="images/logo.png" alt=""></a></h1>
<h2 class="to-animate maintitle">Welcome to Información Climática</h2>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_2.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_3.jpg);" data-stellar-background-ratio="0.5"></li>
<li style="background-image: url(images/slide_4.jpg);" data-stellar-background-ratio="0.5"></li>
</ul>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap DateTimePicker -->
<script src="js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Stellar Parallax -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
direction: "vertical",
animation: "fade"
});
});
$(function(){
$('.selectpicker').selectpicker();
});
</script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
カスタムJavaScriptコードは次のとおりです。
;(function() {
'use strict';
// iPad and iPod detection
var isiPad = function(){
return (navigator.platform.indexOf("iPad") != -1);
};
var isiPhone = function(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
};
var fullHeight = function() {
if (!isiPad() && !isiPhone()) {
$('.js-fullheight').css('height', $(window).height());
$(window).resize(function(){
$('.js-fullheight').css('height', $(window).height());
})
}
};
var sliderMain = function() {
$('#fh5co-home .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000
});
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
$(window).resize(function(){
$('#fh5co-home .flexslider .slides > li').css('height', $(window).height());
});
};
var sliderSayings = function() {
$('.clients-area .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
directionNav: true,
smoothHeight: true,
animationLoop: true,
itemWidth: 160,
itemMargin: 7,
minItems: 2,
maxItems: 7,
move: 1,
});
}
var fs = $('#fh5co-sayings .flexslider'),
dataItem = fs.data('item'),
item = fs.find('.item');
// Wrap divs
for (var i = 0; i < item.length; i+=dataItem) {
item.slice(i, i+dataItem).wrapAll('<div class="items"></div>');
}
// Initialize flexslider
fs.flexslider({
selector: '.slides > .items',
animation: "slide",
animationLoop: false,
directionNav: false,
slideshow: false,
smoothHeight: true,
itemMargin: 0,
minItems: 1,
maxItems: 1
});
var offcanvasMenu = function() {
$('body').prepend('<div id="fh5co-offcanvas" />');
$('body').prepend('<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>');
$('.fh5co-main-nav .fh5co-menu-1, .fh5co-main-nav .fh5co-menu-2').each(function(){
var $this = $(this);
$('#fh5co-offcanvas').append($this.clone());
});
// $('#fh5co-offcanvas').append
};
var mainMenuSticky = function() {
var sticky = $('.js-sticky');
sticky.css('height', sticky.height());
$(window).resize(function(){
sticky.css('height', sticky.height());
});
var $section = $('.fh5co-main-nav');
$section.waypoint(function(direction) {
if (direction === 'down') {
$section.css({
'position' : 'fixed',
'top' : 0,
'width' : '100%',
'z-index' : 2
}).addClass('fh5co-shadow');;
}
}, {
offset: '400px'
});
$('.js-sticky').waypoint(function(direction) {
if (direction === 'up') {
$section.attr('style', '').removeClass('fh5co-shadow');
}
}, {
offset: function() { return -$(this.element).height() + 69; }//70 ki bjaye 69 likhain ge to theek ho jaye ga
});
};
$(function() {
var header = $(".fh5co-main-nav");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 200) {
header.removeClass('fh5co-main-nav').addClass("fh5co-main-nav darkHeader");
} else {
header.removeClass("fh5co-main-nav darkHeader").addClass('fh5co-main-nav');
}
});
});
// Parallax
var parallax = function() {
$(window).stellar();
};
// Burger Menu
var burgerMenu = function() {
$('body').on('click', '.js-fh5co-nav-toggle', function(event){
var $this = $(this);
$('body').toggleClass('fh5co-overflow offcanvas-visible');
$this.toggleClass('active');
event.preventDefault();
});
};
var scrolledWindow = function() {
$(window).scroll(function(){
var scrollPos = $(this).scrollTop();
$('#fh5co-home .fh5co-text').css({
'opacity' : 1-(scrollPos/300),
'margin-top' : (-212) + (scrollPos/1)
});
$('#fh5co-home .flexslider .fh5co-overlay').css({
'opacity' : (.5)+(scrollPos/2000)
});
if (scrollPos > 200) {
$('#fh5co-home .fh5co-text').css('display', 'none');
} else {
$('#fh5co-home .fh5co-text').css('display', 'block');
}
});
$(window).resize(function() {
if ($('body').hasClass('offcanvas-visible')) {
$('body').removeClass('offcanvas-visible');
$('.js-fh5co-nav-toggle').removeClass('active');
}
});
};
var goToTop = function() {
$('.js-gotop').on('click', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $('html').offset().top
}, 500);
return false;
});
};
// Page Nav
var clickMenu = function() {
var topVal = ($(window).width() < 769) ? 0 : 58;
$(window).resize(function(){
topVal = ($(window).width() < 769) ? 0 : 58;
});
$('.fh5co-main-nav a:not([class="external"]), #fh5co-offcanvas a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section');
if ($('div[data-section="' + section + '"]').length) {
$('html, body').animate({
scrollTop: $('div[data-section="' + section + '"]').offset().top - topVal
}, 500);
}
event.preventDefault();
// return false;
});
};
// Reflect scrolling in navigation
var navActive = function(section) {
$('.fh5co-main-nav a[data-nav-section], #fh5co-offcanvas a[data-nav-section]').removeClass('active');
$('.fh5co-main-nav, #fh5co-offcanvas').find('a[data-nav-section="'+section+'"]').addClass('active');
};
var navigationSection = function() {
var $section = $('div[data-section]');
$section.waypoint(function(direction) {
if (direction === 'down') {
navActive($(this.element).data('section'));
}
}, {
offset: '150px'
});
$section.waypoint(function(direction) {
if (direction === 'up') {
navActive($(this.element).data('section'));
}
}, {
offset: function() { return -$(this.element).height() + 155; }
});
};
// Animations
var homeAnimate = function() {
if ($('#fh5co-home').length > 0) {
$('#fh5co-home').waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
$('#fh5co-home .to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var aboutAnimate = function() {
var about = $('#fh5co-about');
if (about.length > 0) {
about.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
about.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
about.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var sayingsAnimate = function() {
var sayings = $('#fh5co-sayings');
if (sayings.length > 0) {
sayings.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
sayings.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var featureAnimate = function() {
var feature = $('#fh5co-featured');
if (feature.length > 0) {
feature.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
feature.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
feature.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('bounceIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var typeAnimate = function() {
var type = $('#fh5co-type');
if (type.length > 0) {
type.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
type.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var foodMenusAnimate = function() {
var menus = $('#fh5co-menus');
if (menus.length > 0) {
menus.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
menus.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
menus.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var eventsAnimate = function() {
var events = $('#fh5co-events');
if (events.length > 0) {
events.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
events.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
events.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var reservationAnimate = function() {
var contact = $('#fh5co-contact');
if (contact.length > 0) {
contact.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
contact.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
contact.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
var footerAnimate = function() {
var footer = $('#fh5co-footer');
if (footer.length > 0) {
footer.waypoint(function(direction) {
if(direction === 'down' && !$(this.element).hasClass('animated')) {
setTimeout(function() {
footer.find('.to-animate').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeIn animated');
}, k * 200, 'easeInOutExpo');
});
}, 200);
setTimeout(function() {
footer.find('.to-animate-2').each(function(k) {
var el = $(this);
setTimeout (function() {
el.addClass('fadeInUp animated');
}, k * 200, 'easeInOutExpo');
});
}, 500);
$(this.element).addClass('animated');
}
} , { offset: '80%' });
}
};
// Document on load.
$(function(){
fullHeight();
sliderMain();
sliderSayings();
offcanvasMenu();
mainMenuSticky();
parallax();
burgerMenu();
scrolledWindow();
clickMenu();
navigationSection();
goToTop();
// Animations
homeAnimate();
aboutAnimate();
sayingsAnimate();
featureAnimate();
typeAnimate();
foodMenusAnimate();
eventsAnimate();
reservationAnimate();
footerAnimate();
});
}());
にそれを置きます。 – DragonBorn
@SLASH HTMLとJavascriptのコードを投稿しました。あなたはこのリンク上にあるだろうコード：[リンク]（http://preview.scriptscale.com/climate123/index.html） – scriptscale