1
slideToggle을 사용하여 축소 가능한 secitons가있는 탐색 메뉴를 만들었습니다.jquery slide 토글 메뉴가 처음에 작동하지 않습니다.
'이 제품 필터링'을 클릭하면 하위 메뉴가 나타납니다. 처음에 하위 메뉴를 클릭하면 회색 영역이 표시되고 옵션이 표시되기까지 1 ~ 2 초가 지연됩니다. 그러나 슬라이드 메뉴를 닫으려면 클릭 한 다음 지연없이 슬라이드 업하십시오. 하위 메뉴 링크를 다시 클릭하면 지연없이 슬라이드됩니다.
지연은 하위 메뉴를 처음 클릭 할 때만 나타나는 것으로 나타납니다. 이것이 무엇 일 수 있는지에 대한 생각? 사전에 어떤 도움 http://jsfiddle.net/j8aRt
감사 :
<style>
.refinement-ttl {display:none;}
.lhnav_container {width:100%; overflow:hidden; clear:both; border:1px solid #EBEBEB;}
#refinement-menu {margin:0%; width:100%;}
a.menu-link {height:auto; width:100%; display:block; color:#fff; float:left; padding:12px 0; font-family:arial; font-size:1.8em; text-transform:uppercase; background:#000000;}
.side-menu .refinement-submenu {padding:0px; display:none;}
.side-menu ul {margin:0; padding:0; border:none; overflow:hidden; width:98%; list-style:none;}
.side-menu>ul>li {margin:0 1%;}
.side-menu>ul>li>a {width:98%; padding:10px 0 10px 2%; background:#580f3b; color:#ffffff; text-transform:uppercase; text-decoration:none;}
.side-menu>ul>li>a.active {background:red;}
.side-menu>ul>li>a span {color:#ffffff; font-family:'geometric_medium', arial;}
.side-menu>ul>li>ul {margin:2% 0 0 0;}
.side-menu>ul>li>ul>li {height:50px; float:left; width:33%;}
.side-menu ul.refinement-submenu li label input {margin:2px 0 0 0;}
.side-menu ul.refinement-submenu li label:hover {background:none; color:#000000;}
.side-menu ul.refinement-submenu li label span {text-transform:uppercase; font-size:1.2em; font-family:'PTSansBold', arial;}
.side-menu.active, .side-menu > ul ul.active {max-height:200em;}
.side-menu ul ul, .side-menu ul ul ul {display:inherit; position:relative; left:auto; top:auto; border:none;}
.side-menu, .side-menu > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
.side-menu li a { color: #000; display: block; position: relative; }
.refinement-menu-btns {display:none;}
.refinement-menu-btns input.cancel_refinement {background:#929292; color:#ffffff; margin:0 10px 0 0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="lft_col_sml">
<div class="lhnav_container">
<a class="menu-link" href="">Filter These Products</a>
<div class="refinement-ttl">Refine by</div>
<nav id="refinement-menu" class="side-menu subcategory-menu">
<div class="refinement-menu-btns">
<input type="button" class="cancel_refinement" value="CLEAR"/>
<input type="button" class="apply_refinement" value="APPLY »"/>
</div>
<ul>
<li class="has-submenu">
<a href="#">
<span>Menu Area 1</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 2</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 3</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 3</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 4</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 5</span>
</label>
</li>
</ul>
</li>
<li class="has-submenu">
<a href="#">
<span>Menu Area 4</span>
</a>
<ul class="refinement-submenu">
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" />
<span class="label_ttl">Submenu 2</span>
</label>
</li>
</ul>
</li>
</ul>
<div class="refinement-menu-btns bottom">
<input type="button" class="cancel_refinement" value="CLEAR"/>
<input type="button" class="apply_refinement" value="APPLY »"/>
</div>
</nav>
</div>
<script>
jQuery(document).ready(function($) {
var $menu = $('#refinement-menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-submenu > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active');
$this.next('ul').slideToggle().addClass('active');
});
});
</script>
</div>
가 여기 내 jsfiddle입니다 :
여기 내 코드입니다!
당신이 찾고있는 무엇을 –