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 在暂停时断开连接

iphone - NSFetchedResultsController/父子
我正在开发我的第一个核心数据支持的应用程序，但无法弄清楚如何正确设置 NSFetchedResultsController。我有两个实体: /-----------\ /--------
Java 父子 JFrame
我是 javax.swing.* 包的新手，只熟悉 c#.net。我有两个 JFrame，分别是 frmLogin 和 frmMain。我想要做的只是一个像这样的简单代码: +----- C# 版本
ios - 父子 Realm
我正在从 CoreData 迁移到 Realm...本质上我需要有两个独立的数据库，假设一个只有内存，第二个有磁盘持久性现在在解析期间，我需要创建一个可以在给定线程中工作但与我选择的顶级 Realm
MYSQL 以树格式输出或添加级别(父子)
下面是我的表中的内容。我的表格 ++++++++++++++++++++ Parent + Child ++++++++++++++++++++ C1 + G1 C1
angularjs - 父子 Controller 数据设计
好的，让我们设置一个场景。场景: 您有一个内容 Controller 。该内容可能是一张照片、一篇博文等等。现在，在此内容的 html 中，您有一个 Comment Controller 。 Com
shell - 父子 shell 脚本问题
我有两个脚本 parent.sh 和 child.sh。 parent.sh 中有一个变量需要被子进程访问。我已经通过在父脚本中导出变量来实现这一点，并且该变量可用于子进程？有什么方法可以让 chi
sql - 父子 SQL 递归
我见过类似但不完全相同的请求。如果我有下表 Parent Child 1 2 1 3 4 3 5 1 6 1 5 7 8
c# - 在自引用(父子)层次树中查找所有后代
这类似于问题 ( Finding parents in a tree hierarchy for a given child LINQ (lambda expression) )。但是，我不需要找到所
c# - Linq to Sql 父子
好的，所以我是 C# 做事的新手，我来自 ruby 世界。我有一个一对多的关系(为了这个问题， parent 对 child )，出于某种原因，L2S 想要创建一个新的 parent 而不是使用
javascript - 基于分层(父子)数据的数据驱动面包屑
我想为我的网站创建一个完全由数据驱动的面包屑。数据使用 MariaDB 存储，如下所示: parent_id | parent_name | child_id | child_name ——————
ios - 父子 UIViewControllers IOS
所以，我正在查看 Parse Anypic 教程中的代码 here 我的问题是: 有这 2 个 View Controller : @interface PAPHomeViewController :
html - 父子 css 树
我正在使用 CSS 处理树结构层次结构，我需要一些帮助。我想让两个父子链接起来，如果我删除字符 a，我将无法查看 CSS ::after 选择器中定义的 border-left 来自内容元素。这是我
javascript - 父子 div 的可见性问题
我对实现以下目标有点困惑1.禁用一个父div的可见性2. 但另一个代码允许子 div 可见性 http://jsfiddle.net/cbXxU/ 如果父 div 不可见或对此
jquery - 使不同的li(父子)具有相同的宽度
我正在创建一个水平的 ul 导航栏。每个 li 元素都有不同的宽度。我想在下拉菜单中做到这一点，下拉菜单中的“子级” li 项的长度/宽度与“父级” li 项的长度/宽度相同。正在考虑使用 jQuer
hibernate @OneToMany 与mappedBy(父子)关系和缓存问题
我有这个问题很长时间了，我已经在网上和SO进进出出搜索，但还没有找到解决方案。我希望你能帮助我。我有两个实体之间的父子关系，如下所示: @Entity public class Parent {
java - 如何在selenium java中找到复杂(父子)xpath
我需要在我的网页上找到一个与其他元素具有相同标签的元素，因此我需要根据子部分[parent]的标题找到xpath。以下是网页的html代码: 基本上，我想根据上图中的 Scheduled 文本在 l
java - Hibernate 注解 - 成人和可连接(父子)
我有 2 张 table .. Adult ------------------- id ParentChild ------------------- parentID(adult's id) ch
javascript 模式，父子 sibling 层
我想创建一个函数来创建彼此具有分层关系的对象。因此，每个层对象都拥有自己的一组子层对象，并与其所有兄弟对象共享一个父对象。我不熟悉任何模式，但我想应该有一个模式可以涵盖这种情况。 //construc
javascript - 父子 div removechild() 无法工作
我有一个父 div 和一个子 div。这里是 html Parent Child Div Js var parent = document.createElement("parent");
javascript - Reactjs - 父子 Action 和函数
我正在开发一个 reactjs 应用程序 - 我正在分解一个大组件以拥有一个子组件。我在 child 中创建了一个回调函数，它将返回给 parent 。当一个复选框被选中时——子组件执行回调并返回到父

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - JQuery/CSS 父子继承 NIGHTMARE