堆棧內存溢出
  簡體   English   中英

JQuery / CSS父子繼承NIGHTMARE

[英]JQuery/CSS Parent-Child Inheritance NIGHTMARE

 原文  2014-12-28 19:18:17  7   1    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我在嘗試在Bootstrap框架中實現特定的JQuery效果時遇到了問題（使用已經存在問題的龐大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>

現在可以正常工作了。 問題是當我嘗試將相同的代碼實現到非常復雜的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 -->

這是為嵌套的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>

1 個解決方案

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

我只是用您的代碼（ Bootply）設置了一個bootply，並且在刪除了“ closure to prevent”注釋后，它可以正常工作 

(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錯誤，因為以前必須存在一些錯誤，例如由於額外的close )}; 已被刪除。
如果不熟悉Web開發工具，請在以下位置找到有關Firefox的一些詳細信息： https : //developer.mozilla.org/en-US/docs/Tools/Web_Console和在Chrome處可以找到一些詳細信息： https : //developer.chrome.com/devtools/文檔/控制台

額外的測試可能是包括正在運行的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>

另外-由於OP是SO的新功能-因此，應避免進行擴展討論，有關詳細信息， 請參見https://meta.stackexchange.com/questions/95937/why-must-we-avoid-discussions-in-comments 。 可以將這樣的擴展討論從評論移動到聊天 ，但是必須至少具有20個聲譽。 正如我刪除一些評論以進行清理一樣的解釋（OP也可以這樣做）。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery父子選擇 將多層次父子關系轉換為數組（樹）-JavaScript或jQuery jQuery父子復選框無法正確隱藏 Javascript父子項 分組父子對象 VueJS 中的父子通信 以父子關系打印數組 在哪里處理父子事件React 父子關系和對象查看器中的導航 跨多個選項卡的父子導航
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM