JQuery / CSS父子继承NIGHTMARE

Question

I am having a problem with trying to implement specific JQuery effects into a Bootstrap framework (with its already HUGE CSS that is creating problems). 我在尝试在Bootstrap框架中实现特定的JQuery效果时遇到了问题（使用已经存在问题的庞大CSS）。

I have created a sterile, test file called testjquery.html which works fine, connected to a stylesheet that defines a hidden element, and then activates the fade in of this element via JQuery. 我创建了一个名为testjquery.html的无菌测试文件，该文件运行良好，并连接到定义了隐藏元素的样式表，然后通过JQuery激活该元素的淡入。 Here is CSS: 这是CSS：

#homepageframex > div > h1 {
    display: none;
    width: 250px;
    margin; 20px;
    z-index:100;
}

And here is the HTML that connects to this CSS which works fine: 这是连接到此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>

Now this works fine. 现在可以正常工作了。 The problem is when I try to implement this same code into a very complicated Bootstrap layout: 问题是当我尝试将相同的代码实现到非常复杂的Bootstrap布局中时：

<!-- 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 -->

And here is the corresponding JQuery code and CSS code changed for the nested DIV tags - but this doesn't work!! 这是为嵌套的DIV标签更改的相应的JQuery代码和CSS代码-但这不起作用！ Does anyone know why? 有人知道为什么吗？

<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;
}

Can anyone help and let me know why this is not working for me? 谁能帮助我，让我知道为什么这对我不起作用？ What is it that is conflicting? 有什么冲突？

Thanks. 谢谢。

And here is the complete code of page that is not working: 这是无法使用的页面的完整代码：

<!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>

Answer 1

I just set up a bootply with your code - Bootply - and it's working after removing the 'closure to prevent' comment from 我只是用您的代码（ Bootply）设置了一个bootply，并且在删除了“ closure to prevent”注释后，它可以正常工作

(function( $ ) {   // closure to prevent

I've added a <div class="fadein-link">fade in</div> to trigger the fade-in. 我添加了<div class="fadein-link">fade in</div>以触发淡入。

Update: 更新：
To summarize additional information from comments after the complete html having the issue was added in the OP: jquery was included twice, once in the header (as js/jquery.min.js so it's not possible to know which version), and once in the footer as <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> . 为了在OP中添加具有问题的完整html之后从注释中总结更多信息：jquery被包含两次，一次包含在标头中（因为js/jquery.min.js因此无法知道哪个版本），一次包含在页脚为<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 。

Though it's possible to use different versions of jQuery - for details check http://api.jquery.com/jquery.noconflict/ - it's not recommended and maybe isn't necessary at all. 尽管可以使用不同版本的jQuery-有关详细信息，请访问http://api.jquery.com/jquery.noconflict/-不建议这样做，也许根本没有必要。 It could be necessary to use 2 different jQuery versions. 可能有必要使用2个不同的jQuery版本。 eg if included plugins would only work with a specific version, but this doesn't seem to be the case. 例如，如果包含的插件仅适用于特定版本，但是事实并非如此。 Removing one of the jquery.js includes didn't solve the issue. 删除其中一个jquery.js并不能解决问题。

If not already done, I recommend to check if there are any javascript errors by opening the web developer tools, as previously there must have been some errors because of eg additional closing )}; 如果尚未完成，我建议您通过打开Web开发人员工具来检查是否存在任何JavaScript错误，因为以前必须存在一些错误，例如由于额外的close )}; which was already removed. 已被删除。
If unfamiliar with web dev tools, find some details for Firefox here: https://developer.mozilla.org/en-US/docs/Tools/Web_Console and for Chrome here: https://developer.chrome.com/devtools/docs/console 如果不熟悉Web开发工具，请在以下位置找到有关Firefox的一些详细信息： https : //developer.mozilla.org/en-US/docs/Tools/Web_Console和在Chrome处可以找到一些详细信息： https : //developer.chrome.com/devtools/文档/控制台

Additional test could be to include the jquery/jquery.ui/bootstrap version from the working bootply instead of the current includes: 额外的测试可能是包括正在运行的bootply中的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>

Aside - Because OP is new to SO - extended discussions should be avoided, for details https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments . 另外-由于OP是SO的新功能-因此，应避免进行扩展讨论，有关详细信息，请参见https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments 。 It's possible to move such an extending discussion from the comments to chat , but it's necessary to have at least 20 reputation for that. 可以将这样的扩展讨论从评论移动到聊天，但是必须至少具有20个声誉。 Just as explanation as I'm deleting some of my comments to clean this up (which OP could do, too). 正如我删除一些评论以进行清理一样的解释（OP也可以这样做）。

JQuery / CSS父子继承NIGHTMARE

问题描述

1 个解决方案

解决方案1
1 2014-12-28 19:56:18

JQuery / CSS父子继承NIGHTMARE

问题描述

1 个解决方案

解决方案1 1 2014-12-28 19:56:18

解决方案1
1 2014-12-28 19:56:18