html - Strange issue with slideDown in jQuery -


i've got script https://jsfiddle.net/n4yua7h0/1/ it's working fine on jsfiddle, can see. yet, reason, when used in production it's starting behave oddly. slidedown function not fire @ first try, later fires fine. there's virtually no difference between html , js structure in jsfiddle , production code. identical. production site working on jboss 7 server jsf, , particular level-2 divs generated in java. when parsed html it's same code in fiddle. what's source of issue , how fix it? might tha jsf/java origin?

it seems work fine.

$(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();    });
.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;  }
<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>

you may:

  1. need import jquery in html.
  2. need wrap javascript in $(document).ready(function() {...});.

jsfiddle both of things javascript settings button


Comments

Post a Comment