Question

我认为CSS和jQuery如何沟通有困难，我想（？）。

在CSS中，我经常把我的规则写成直接的孩子，也增加了特异性，比如

div#container > div#contentLeft {
   //Code here
}

然后，当我尝试使用jQuery使我的网站变得非常棒时，我的jQuery代码执行后会加载CSS规则。我希望CSS之前加载，因此内容很好，并且我的动画很整洁。

这可以通过编写较少的指定代码来修复，例如：#contentLeft {}。然后，当我尝试我的脚本时，CSS被加载，然后我的脚本按预期运行。

我想以高度特异性编码...但是，如果我希望我的jQuery运行顺利，我可以吗？

JSfiddle：http://jsfiddle.net/459epctg/

＆＃13;

$(document).ready(function() {
  $('#contentMenu').show('slide', {
    direction: 'up'
  }, 1000);
  showContent();
});

function showContent() {
  $('#menu').click(function() {
    $('#contentMenu').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#locations').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#specials').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').hide('slide', {
      direction: 'up'
    }, 1000);
  });

  $('#gifts').click(function() {
    $('#contentMenu').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentLocations').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentSpecials').hide('slide', {
      direction: 'up'
    }, 1000);
    $('#contentGifts').delay(1000).show('slide', {
      direction: 'up'
    }, 1000);
  });
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
  background-color: #CDBFAC;
}
div#wrapper {
  width: 90%;
  height: auto;
  margin: 15px auto 15px auto;
}
div#navbar {
  width: 100%;
  height: 50px;
  background-color: #CDBFAC;
}
div#navbar > ul {
  list-style-type: none;
}
div#navbar > ul > li {
  display: inline-block;
  width: 175px;
  height: 50px;
  background-color: #148FC7;
  line-height: 50px;
  text-align: center;
  color: white;
  cursor: pointer;
}
div#content {
  width: 100%;
  height: auto;
  position: relative;
}
div#content > div#contentMenu {
  width: 100%;
  height: 500px;
  background-color: #004660;
  position: absolute;
  display: none;
}
div#content > div#contentLocations {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentSpecials {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentSpecials > ul {
  list-style-type: none;
}
div#content > div#contentGifts {
  width: 100%;
  height: 500px;
  background-color: #004660;
  display: none;
  position: absolute;
}
div#content > div#contentGifts button {
  width: 200px;
  height: 50px;
  border-radius: 5px;
  margin-left: 20px;
}
div#content > div#contentMenu > h1,
div#content > div#contentMenu > h4,
div#content > div#contentMenu > ul,
div#content > div#contentMenu > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentLocations > h1,
div#content > div#contentLocations > p,
div#content > div#contentLocations > h4,
div#content > div#contentLocations > ul,
div#content > div#contentLocations > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentSpecials > h1,
div#content > div#contentSpecials > p div#content > div#contentSpecials > h4,
div#content > div#contentSpecials > ul,
div#content > div#contentSpecials > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
div#content > div#contentGifts > h1,
div#content > div#contentGifts > p,
div#content > div#contentGifts > h4,
div#content > div#contentGifts > ul,
div#content > div#contentGifts > ul > li {
  color: white;
  list-style-type: none;
  margin-left: 20px;
}
h1 {
  border-bottom: 2px solid white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="navbar">
    <ul>
      <li id="menu">Menu</li>
      <li id="locations">Locations</li>
      <li id="specials">Specials</li>
      <li id="gifts">Gifts</li>
    </ul>
  </div>
  <div id="content">
    <div id="contentMenu">
      <h1>Menu</h1>
      <h4>This is our menu</h4>
      <ul>
        <li>Pork filé</li>
        <li>Mashed potatoes</li>
        <li>Very Bloody Steak</li>
      </ul>
    </div>
    <div id="contentLocations">
      <h1>Locations</h1>
      <p>We got 100 restaurants and this is one of 'em</p>
    </div>
    <div id="contentSpecials">
      <h1>Specials</h1>
      <ul>
        <li>BBQ on a plastic plate</li>
      </ul>
    </div>
    <div id="contentGifts">
      <h1>Gifts</h1>
      <p>All of our guests recieve an awesome gift on arrival</p>
      <button>Click to reveal the awesome gift</button>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您需要确保使用有效参数调用函数。您的规则加载没有问题，但您的代码中有错误。你有这个代码：

$(document).ready(function(){
    $('#contentMenu').show('slide', {direction: 'up'}, 1000);
    showContent();
});

但是，.show()没有此类通话可能，请阅读更多here。在阅读了代码的其他部分之后，我想你想要这个：

$(document).ready(function(){
    $('#contentMenu').delay(1000).show('slide', {direction: 'up'});
    showContent();
});

见fiddle。无论何时遇到问题，都不要错过检查控制台和调试的可能性。

我的CSS规则在我的jQuery函数执行后加载

1 个答案: