Question

我有这个脚本https://jsfiddle.net/n4yua7h0/1/ 正如您所看到的，它在JSFiddle上运行得非常好。然而，出于某种原因，当它在生产中使用时，它开始表现得很奇怪。 level-2函数在第一次尝试时不会触发，但稍后它会触发。在JSFiddle和生产代码中，HTML和JS结构之间几乎没有区别。一切都是一样的。生产站点正在使用带有JSF的JBOSS 7服务器，并且这些特定的{{1}} div在java中生成。但是当解析为HTML时，它与Fiddle中的代码相同。该问题的来源是什么以及如何解决？可能是JSF / Java的起源吗？

Answer 1

似乎工作正常。

＆＃13;

$(document).ready(function() {
function dropMouse(){
  $('.level-2').each(function(){
    var self = $(this);
    if(self.find('.content').children().length <= 3){
    	self.find('.roll-button').addClass('hide');
      self.find('.content').addClass('blocky');
    } else{
      self.find('.category-with-checkbox:gt(2)').addClass('hide');
      self.mouseenter(function(){			
        self.find('roll-button').addClass('active');
        self.find('.category-with-checkbox:gt(2)').slideDown('slow').removeClass('hide');
      })
      self.mouseleave(function(){
        self.find('roll-button').removeClass('active');
        self.find('.category-with-checkbox:gt(2)').slideUp('slow').addClass('hide');
      })
    }
  })
}
dropMouse();

});

＆＃13;

.level-2 {
  width: 100px;
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.category-with-checkbox {
  width: 100%
  height: 20px;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid black;
}
.roll-button {
  width: 100%
  height: 20px;
  font-size: 15px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid black;
}
.hide {
  display: none;
}
.active {
  font-weight: bold;
  color: red;
}
.blocky {
  height: 75px;
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-2">
  <div class="content">
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
  </div>
  <div class="roll-button">^</div>
</div>
<div class="level-2">
  <div class="content">
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
  </div>
  <div class="roll-button">^</div>
</div>
<div class="level-2">
  <div class="content">
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
    <div class="category-with-checkbox">s</div>
  </div>
  <div class="roll-button">^</div>
</div>

＆＃13;

你可以：

需要在HTML中导入jQuery。
需要将您的javascript包装在$(document).ready(function() {...});。

JSFiddle使用Javascript设置按钮为您完成这两项工作

在jQuery中使用slideDown的奇怪问题

1 个答案: