Question

我有一个带导航按钮和下拉菜单的div，其下方有一个照片滑块，使用时需要包含jquery.min.js。

当我包含jQuery时，它会影响我的CSS，防止我的下拉开放。

<div id="sticky_navigation">
  <ul class="menumix">
    <li><a href="index.php"><img src="images/home_icon.png"></a></li>
    <li><a href="page.php">VIDEOS</a></li>
    <li><a href="#">LANGUAGE<span class="dc-mega-icon"></span></a>
    <ul class="sub">
      <li><a href="setcookies.php?id=5">English</a></li>
      <li><a href="setcookies.php?id=6">Malayalam</a></li>
    </ul>
  </ul> 
</div>

<script type='text/javascript' src='slider/scripts/jquery.min.js'></script>
 <div id="slider_main">     
  <div id="fluid_container">
    <div class="camera_wrap" id="camera_wrap_1">
      <div data-src="slider/slides/">
      </div>     
    </div>
  </div> 
</div>

Answer 1

听起来下拉组件和滑块组件之间存在一些CSS路径冲突。

您可以通过修改某些元素来暂时解决此问题。 ID，略微修改HTML结构，但我强烈建议您阅读组件＆＃39;源代码，如果可以看到他们正在使用什么样的CSS配置。

另一种快速确认错误的方法是打开浏览器Web开发人员工具（例如：Chrome内置的开发人员工具），以查看组件的哪些类型的CSS属性被意外地继承，并且该工具的Javascript控制台可能会向您提供可能发生的Javascript错误的信息。

祝你好运。

Answer 2

某些jQuery UI插件实际上会为HTML添加类和属性。如果您想利用jQuery为您提供的便利和优雅，这绝对是必要的。

由于插件或模块实际上是在为HTML添加属性和样式，因此您应该（1）重新编写插件，完全避免使用jQuery库。（2）对插件进行分叉，并更改HTML属性更改代码并选择符合您需求和约束的符号。

Answer 3

我通过为下拉列表添加一些简单的css代码来修复此问题即

ul li:hover ul
 {
  display: block;
  opacity: 1;
  visibility: visible;
}

之前的下拉列表是在没有此代码的情况下工作但现在添加新滑块后我需要添加此附加代码以显示dropdwon。谢谢所有想出解决这个问题的人。

如何避免jquery库影响我的CSS

3 个答案: