【发布时间】：2020-03-06 21:31:13
【问题描述】：
我在使用此网站时遇到问题。它对我来说是一个学习网站，希望能成为我爱好的网站，但它现在处于粗略形式。我正在使用 Bootstrap 进行响应，并且在其中有一些 JQuery 用于中间的手风琴用于各种日志。我正在使用 JQuery 在悬停时突出显示一些文本，也许还会出现其他一些事情。
我的问题是，JQueryUI 中的某些东西似乎破坏了我在手风琴区域中具有漂亮深灰色背景的标题的漂亮样式，您可以在页面加载时看到一瞬间，直到jqueryUI 加载，然后将我的样式更改为白色背景标题。
查看http://joshsbees-com.stackstaging.com，您就会明白我的意思。
如何将引导程序与 JQueryUI 和我自己的 CSS 一起使用？我确定我这里的脚本太多了，有些东西在某个地方交叉了。
这是我的索引页中的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Josh's Bees</title>
</head>
<body>
<div class="conainer">
<div class="row">
<header class="col">
<h1>Welcome to Josh's Bees</h1>
<h3>Bee farm in southern Jones County Georgia</h3>
</header>
</div>
<div class="row">
<div class="col">
<img src="/images/me.JPG" align="left"/>
<p>I got interested in beekeeping in 2018 when helping my dad. He got 2 hives and I helped him occasionally
by holding tools, smoking them, lifting boxes, and such. I just could not get enough of watching God's
miraculous work at hand in those little creatures. Everything from watching them build comb to laying
eggs and storing nectar which they then turned into honey. I was hooked and still they never cease to
amaze me.
</p>
</div>
</div>
<div class
"clear">
</div>
<div class="row">
<!--Left Column-->
<div class="col-md-4">
<p>I set up the hive and bought a nuc in mid May 2019. I spent the summer learning a lot and watching my
bees.</p>
<img src="/images/drawncomb1.jpg" width="250px"/>
<img src="/images/drawncomb2.jpg" width="250px"/>
</div>
<!--Center Column-->
<div class="col-md-4">
<div id="logtitle">
<h3>2020 Inspection Report</h3>
</div>
<div id="accordion">
<h3 class="log">Feb 9 2020</h3>
<div>
<p>First quick inspection of this year. I wanted to get in and see how they were doing over the winder.
Last check was early December 2019 and there was not much brood capped. This time, however, since
the days are getting longer, the queen has several frames in the middle of the top box with fully
capped brood. There is a healthy amount of bees in the hive as well. Today was a sunny day, light
wind and mild temperatures. The bees were calm, but with healthy activity and still good on honey
stores. Dry sugar on top has not been eaten at all.</p>
<br/>
</div>
<h3 class="log">March 1 2020</h3>
<div>
<p>Today was mostly cloudy and cool. High in the low 60's, so I knew the girls would be cranky and I
suited up for the occasion, gloves and all. Objective for today was to swap brood chambers, check
food stores, and add beetle barns to each layer: bottom board, top of bottom box, and top of top
box. I did a quick frame inspection of the top box. Saw good capped brood pattern on several frames.
Hive had healthy supply of bees which stands to reason after the amount of capped brood I saw in
February. I did not see any swarm cells, but I only did a quick glance over as I was swapping boxes.
They were getting angry and were all up in my face. If I had not had on gloves and full suit, I
would definitely have gotten popped multiple times. They were also eating the dry sugar pretty good,
but still have a little capped honey in the hive.</p>
<br/>
</div>
<h3 class="log">March 2 2020</h3>
<div>
<p>I added a Boardman entrance feeder today with some 1:1 syrup to begin feeding. Plan to add honey
super end of March.</p>
<br/>
</div>
</div>
</div>
<!--Right Column-->
<div class="col-md-4">
<h3>Links of my Favorite Sites</h3>
<ul>
<li><a href="http://www.barnyardbees.com">Barnyard Bees</a></li>
<li><a href="http://www.dadant.com">Dadant</a></li>
<li><a href="http://www.fatbeeman.com">Dixie Bee Supply</a></li>
</ul>
</div>
</div>
</div>
<footer id="footer" class="footer mt-auto py-3">
<div class="container">
<span class="text">Design by Josh Scoville, January 2020</span>
</div>
</footer>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!--end of bootstrap scripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$("#accordion").accordion({
collapsible: true,
heightStyle: 'panel'
});
$(".log").hover(function(){
$(this).css("color","orange");
}, function(){
$(this).css("color","white");
});
</script>
</body>
</html>
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap