JQuery/CSS 父子继承噩梦
JQuery/CSS Parent-Child Inheritance NIGHTMARE
我在尝试将特定的JQuery效果实现到Bootstrap框架中时遇到了问题（其已经产生了问题的巨大CSS）。
我创建了一个名为testjquery的无菌测试文件.html它工作正常，连接到定义隐藏元素的样式表，然后通过JQuery激活该元素的淡入。 这是 CSS：
#homepageframex > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
这是连接到此CSS的HTML，它工作正常：
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<p><a href="#" class="fadein-link">Fade In</a></p>
<div id="homepageframex">
<div><img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
<script type="text/javascript">
(function( $ ) { // closure to prevent JQuery conflicts
$('.fadein-link').click(function(){
$('#homepageframex div h1').fadeIn(3000);
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
现在这工作正常。 问题是当我尝试将相同的代码实现到非常复杂的引导程序布局中时：
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
这是为嵌套的 DIV 标签更改的相应 JQuery 代码和 CSS 代码 - 但这不起作用！！ 有谁知道为什么？
<script type="text/javascript">
(function( $ ) { // closure to prevent
$('.fadein-link').click(function(){
$('#homepageframex div div div h1').fadeIn(3000);
});
})(jQuery);</script>
#homepageframex > div > div > div > h1 {
display: none;
width: 250px;
margin; 20px;
z-index:100;
}
谁能帮忙，让我知道为什么这对我不起作用？ 冲突的是什么？
谢谢。
这是无法正常工作的页面的完整代码：
<!DOCTYPE html>
<!-- BEGIN HTML Document -->
<!-- BEGIN Head -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link media="all" href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customstylesheet.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<!-- END Head -->
<!-- BEGIN Body -->
<body>
<!-- BEGIN NAV BAR -->
<div id="navigationbartop" class="pad-section">
<div class="container" style="background-color: #FFFFFF;">
<div class="row">
<div class="col-xs-10 text-center"></div>
<div class="col-xs-1 text-center">
<a href="about.html" style="font-family: gillsanslight;"><p class="gillsanslight20pt" style="color: #3c3c3b;">About</p></a>
</div>
<div class="col-xs-1 text-center">
<a href="contactus.html" style="font-family: gillsanslight;"><p class="gillsanslight20pt" style="color: #3c3c3b;">Contact Us</p></a>
</div>
</div>
</div>
</div>
<!-- END NAV BAR -->
<!-- BEGIN HEADER -->
<!-- <header> -->
<!-- BEGIN container for HEADER DIV -->
<!-- BEGIN DIV for top header DIVs -->
<div id="headerdivs" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<span class="logotop"><a href="index.html"><img src="images/logo.png" height="200" width="168" alt="" /></a></span>
</div>
<div class="col-xs-2 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<p><a href="#" class="fadein-link">Fade In</a></p>
</div>
</div>
</div>
</div>
<!-- END DIV for top header DIVs -->
<!-- END container for HEADER DIV -->
<!-- </header> -->
<!-- END HEADER -->
<!-- BEGIN DIV for homepageframe1 -->
<div id="homepageframex" class="pad-section">
<div class="container">
<div class="row-fluid">
<div id="content" class="col-xs-12 text-center">
<h1 class="gillsanslight50pt" style="color: #53585f;">Test text here</h1>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe1 -->
<!-- BEGIN DIV for arrow down1 -->
<div id="arrowdownX" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down1 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage1" class="col-xs-12 text-center">
<img src="images/photo1.jpg" height="2000" width="1014" alt="" class="img-responsive" />
<p id="testtext1" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text here also
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down2 -->
<div id="arrowdown2" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-5 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down2 -->
<!-- BEGIN DIV for homepageframe2 -->
<div id="homepageframe2" class="pad-section">
<div class="container">
<div class="row">
<div id="testimage2" class="col-xs-12 text-center">
<img src="images/photo2.jpg" height="3000" width="1655" alt="" class="img-responsive" />
<p id="testtext2" class="gillsanslight40pt" style="color: #FFFFFF;">
Test text three
</p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe2 -->
<!-- BEGIN DIV for arrow down3 -->
<div id="arrowdown3" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down3 -->
<!-- BEGIN DIV for homepageframe4 -->
<div id="homepageframe4" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe4 -->
<!-- BEGIN DIV for arrow down4 -->
<div id="arrowdown4" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-2 text-center">
<img src="images/arrowdown.png" height="90" width="68" alt="" class="img-responsive" />
</div>
<div class="col-xs-1 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for arrow down4 -->
<!-- BEGIN DIV for homepageframe5 -->
<div id="homepageframe5" class="pad-section">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<img src="images/photo3.jpg" height="3000" width="1655" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe5 -->
<!-- BEGIN DIV for homepageframe7 -->
<div id="homepageframe7" class="pad-section">
<div class="container">
<div class="row-fluid">
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
<div class="col-xs-4 text-center">
<img src="images/logo_bottom.png" height="380" width="320" alt="" class="img-responsive" />
</div>
<div class="col-xs-4 text-center">
<p class="lead"></p>
</div>
</div>
</div>
</div>
<!-- END DIV for homepageframe7 -->
<!-- BEGIN FOOTER -->
<footer>
<!-- BEGIN container for NEWSLETTER DIV -->
<div class="container">
<!-- BEGIN DIV Newsletter -->
<div id="newsletterX" class="pad-section">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h3 class="gillsanslight28pt">Leave your e-mail address to find out more</h3>
</div>
<div class="col-sm-12 text-center" style="color: red;">
<form class="form-horizontal">
<!-- BEGIN DIV for Form Group Line 2 -->
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
<span><input type="email" class="form-control" id="contact-email" placeholder="you@example.com">
</div>
<div class="col-xs-1">
<input type="image" src="images/send.png" height="38" width="52" alt="Send" class="mybutton"></span>
</div>
<div class="col-xs-2">
</div>
</div>
<!-- END DIV for Form Group Line 2 -->
</form>
</div>
</div>
</div>
</div>
<!-- END DIV Newsletter section -->
</div>
<!-- END container for NEWSLETTER DIV -->
</footer>
<!-- END FOOTER -->
<!-- BEGIN JavaScript that WORKS rebuilt from individual parts from above script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>
<!-- <script src="js/main.js"></script>This causes the Google Map to disappear -->
<!-- END JavaScript that WORKS -->
<!-- BEGIN JavaScript for Font -->
<script type="text/javascript">
var MTUserId='5b20f3d6-ea3d-4870-9117-9e155b029f7b';
var MTFontIds = new Array();
MTFontIds.push("693341"); // Gill Sans® W01 Light
MTFontIds.push("692628"); // Gill Sans® W01 Roman
(function() {
var mtTracking = document.createElement('script');
mtTracking.type='text/javascript';
mtTracking.async='true';
mtTracking.src=('https:'==document.location.protocol?'https:':'http:')+'//fast.fonts.net/lt/trackingCode.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(mtTracking);
})();
</script>
<!-- END JavaScript for Font -->
<script type="text/javascript">
(function( $ ) {
$('.fadein-link').click(function(){
$('#content').fadeIn(3000);
//$('#c div').css({
// width:1000,
// height:1000,
});
});
})(jQuery);</script>
</body>
<!-- END Body -->
<!-- END HTML Document -->
</html>
我刚刚用你的代码设置了一个引导 - 引导 - 它在删除"关闭以防止"评论来自
(function( $ ) { // closure to prevent
我添加了一个<div class="fadein-link">fade in</div>来触发淡入。
更新：
为了总结在OP中添加了具有问题的完整html之后的评论中的其他信息：jquery被包含两次，一次在页眉中（作为js/jquery.min.js，因此无法知道哪个版本），一次在页脚中作为<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>。
虽然可以使用不同版本的jQuery-有关详细信息 http://api.jquery.com/jquery.noconflict/检查-不建议这样做，也许根本不需要。可能需要使用 2 个不同的 jQuery 版本。例如，如果包含的插件仅适用于特定版本，但情况似乎并非如此。删除其中一个 jquery.js 包含并没有解决问题。
如果还没有完成，我建议通过打开 Web 开发人员工具来检查是否存在任何 javascript 错误，因为以前一定有一些错误，例如已经删除了额外的关闭)};。
如果不熟悉 Web 开发工具，请在此处查找有关 Firefox 的一些详细信息：https://developer.mozilla.org/en-US/docs/Tools/Web_Console，在此处查找 Chrome 的一些详细信息：https://developer.chrome.com/devtools/docs/console
其他测试可能是包含来自工作引导的jquery/jquery.ui/bootstrap版本，而不是当前的包含：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
此外，由于OP是SO的新手，因此应避免长时间的讨论，有关详细信息 https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments。可以将这种扩展的讨论从评论转移到聊天，但至少要有 20 个声誉。就像我删除我的一些评论以清理它一样（OP 也可以这样做）。
相关文章：
- 从控制器继承了隔离的作用域以生成可重用的指令
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 当使用控制器作为语法时，如何从父指令继承属性
- 以jquery方式继承Javascript
- JavaScript对象不是从原型链继承的
- 使用Object.create(）的角度服务继承
- 数据与Javascript中的继承冲突
- JavaScript对象继承问题
- Javascript嵌套函数属性继承
- 为什么不't htmlCollection从数组继承
- 继承的属性检查
- 没有预定义宽度的固定元素最初放在引导容器中，不会从父元素继承宽度
- 如何使用原型继承编写一个整洁灵活的复杂javascript应用程序
- 使用技巧在javascript中强制执行私有继承
- $emit，$broadcast，原型继承
- 如何检查DOM节点是否继承自构造函数
- Javascript多重继承模式
- 玉中继承模板的修改
- Angular中的作用域继承$broadcast
- JQuery/CSS 父子继承噩梦
