javascript - JQuery/CSS 父子继承 NIGHTMARE-6ren

javascript - JQuery/CSS 父子继承 NIGHTMARE

转载作者：太空宇宙更新时间：2023-11-04 12:30:44

我在尝试将特定的 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>

现在一切正常。问题是当我尝试将同样的代码实现到一个非常复杂的 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>

最佳答案

我刚刚用你的代码设置了一个 bootply - Bootply - 在删除'关闭以防止'评论来自

(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 包含并没有解决问题。

如果还没有完成，我建议通过打开网络开发者工具来检查是否有任何 javascript 错误，因为之前肯定有一些错误，例如附加关闭 )}; 已被删除。
如果不熟悉 Web 开发工具，请在此处查找 Firefox 的一些详细信息:https://developer.mozilla.org/en-US/docs/Tools/Web_Console 和 Chrome 的详细信息:https://developer.chrome.com/devtools/docs/console

额外的测试可能是从工作的 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 。可以将此类扩展讨论从评论移至 chat ，但为此必须至少有 20 个声望。正如我正在删除我的一些评论以清理它的解释一样(OP 也可以这样做)。

关于javascript - JQuery/CSS 父子继承 NIGHTMARE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27679788/

文章推荐： c - 如果我在 parent 和 child 中 fork 和 exec 会发生什么？

文章推荐： linux - 使用非标准端口在命令行上发送邮件

文章推荐： java - 蓝牙 LE 在暂停时断开连接

继承
我使用的是 PHP 5.3 稳定版，有时会遇到非常不一致的行为。据我所知，在继承中，父类(super class)中的所有属性和方法(私有(private)、公共(public)和 protected
继承
所以我一直在努力寻找正确的方法来让应该非常简单的继承发挥作用(以我想要的方式 ;))，但我失败得很惨。考虑一下: class Parent { public String name = "Pare
继承
给定这些类: class Father { public Father getMe() { return this; } } class Child extends Father {
继承
为什么最后打印“I'm a Child Class”。？ public class Parent { String parentString; public Parent()
继承
我知道有很多类似的问题对此有很多很好的答案。我试着看看经典的继承方法，或者那些闭包方法等。不知何故，我认为它们对我来说或多或少是“hack”方法，因为它并不是 javascript 设计的真正目的。
WinForms 继承
我已经使用表单继承有一段时间了，但没有对以下方法进行太多研究。只需创建一个新类而不是表单并从现有表单继承并根据需要将所需控件转换为 protected 。 Visual Studio 2010 设计器
C++——继承
我原以为下面的代码片段会产生编译错误，因为派生类不会有我试图在 pub_fun() 中访问的 priv_var。但是它编译了，我得到了下面提到的输出。有人可以解释这背后的理论吗？ class base
java:继承
继承的替代方案有哪些？最佳答案 Effective Java:优先考虑组合而不是继承。 (这实际上也来自《四人帮》)。他提出的情况是，如果扩展类没有明确设计为继承，继承可能会导致许多不恰当的副作用
JavaScript - 继承
我有2个类别:动物( parent )和狗(动物的“ child ”)，当我创建一个 Animal 对象并尝试提醒该动物的名称时，我得到了 undefined ，而不是她的真名。为什么？(抱歉重复发帖
JavaScript:继承
我试图做继承，但没想到this.array会像静态成员一样。我怎样才能让它成为“ protected /公开的”: function A() { this.array = []; } func
java在泛型方法中使用this(继承)
在创建在父类中使用的 lambda 时，我试图访问子类方法和字段。代码更容易解释: class Parent { List> processors; private void do
JavaScript 继承
如果我有一个对象，我想从“ super 对象”“继承”方法以确保一致性。它们将是混合变量。修订 ParentObj = function() { var self = this; t
Java - 继承
class Base { int x=1; void show() { System.out.println(x); } } class Chi
JavaScript 继承
目前我正在尝试几种不同的 Javascript 继承方法。我有以下代码: (“借用”自 http://www.kevlindev.com/tutorials/javascript/inheritanc
Javascript 继承 : How to
我在 .popin-foto 元素中打开一个 popin。当我尝试在同一元素中打开子类 popin 时，它不起作用。代码这是 parent function Popin(container, ti
前置自增运算符的C++继承
我有以下两个类: class MyClass { friend ostream& operatorvalue +=1; return *this; } 现在
CSS 继承
有没有办法完全忽略导入到 html 文件中的 header 中的 CSS 文件？我希望一个页面拥有自己独立的 CSS，而不是从任何其他 CSS 源继承。最佳答案您可以在本地样式表中使用 !imp
JavaScript 继承
Douglas Crockford似乎喜欢下面的继承方式: if (typeof Object.create !== 'function') { Object.create = functio
C#继承
假设我有以下代码: interface ISomeInterface { void DoSomething(); void A(); void B(); } public
链表的C++继承
class LinkedList{ public: int data; LinkedList *next; }; class NewLinkedList: public Lin

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - JQuery/CSS 父子继承 NIGHTMARE